ID e nomenclatura de classe
Sempre use ID e nomes de classe que reflitam a finalidade e o uso do elemento ou outros nomes comuns. Em vez de aparências e nomes obscuros.
Nomes que sejam específicos e reflitam a finalidade do elemento devem ser preferidos porque são os mais compreensíveis e com menor probabilidade de mudança.
Os nomes comuns são apenas nomes alternativos para vários elementos. Eles são iguais entre seus elementos irmãos e não têm significado especial.
Distinga-os para que tenham um significado especial e muitas vezes sejam necessários como “ajudantes”.
Embora a semântica dos nomes de classe e IDs não tenha significado prático para análise de computador,
Os nomes semânticos costumam ser a escolha certa porque representam informações que não impõem limitações expressivas.
Não recomendado
.fw-800 {
peso da fonte: 800;
}
.vermelho {
cor: vermelho;
}recomendar
.pesado {
peso da fonte: 800;
}
.importante {
cor: vermelho;
} Evitação razoável de IDs
Normalmente os IDs não devem ser aplicados aos estilos.
Os estilos de ID não podem ser reutilizados e você só pode usar um ID uma vez por página.
O único uso eficaz de IDs é determinar a posição em uma página da web ou em todo o site.
No entanto, você deve sempre considerar o uso de class em vez de id, a menos que o use apenas uma vez.
Não recomendado
#content .title {
tamanho da fonte: 2em;
}recomendar
.content .title {
tamanho da fonte: 2em;
} Outro argumento contra o uso de IDs é que os seletores que contêm IDs são altamente ponderados.
Um seletor contendo apenas um ID tem um peso maior que um seletor contendo 1000 nomes de classes, o que o torna estranho.
// Este seletor tem um peso maior que o seguinte seletor #content .title {
cor: vermelho;
}
// do que este seletor!
corpo html div.content.news-content .title.content-title.important {
cor: azul;
} Evite nomes de tags em seletores CSS
Ao construir seletores você deve usar nomes de classes claros, precisos e semânticos. Não use seletores de tags. É mais fácil de manter se você se preocupa apenas com os nomes das classes, não com os elementos do código.
Pensando em uma perspectiva de separação, tags/semântica html não devem ser alocadas na camada de apresentação.
Pode ser uma lista ordenada que precisa ser alterada para uma lista não ordenada ou uma div que precisa ser convertida em um artigo.
Se você usar apenas nomes de classes significativos,
E sem usar seletores de elementos, você só precisa alterar sua marcação HTML sem alterar seu CSS.
Não recomendado
div.content > header.content-header > h2.title {
tamanho da fonte: 2em;
}recomendar
.content > .content-header > .title {
tamanho da fonte: 2em;
} tão preciso quanto possível
Muitos desenvolvedores front-end não usam subseletores diretos ao escrever cadeias de seletores (nota: a diferença entre subseletores diretos e seletores descendentes).
Às vezes, isso pode levar a problemas de design dolorosos e às vezes pode consumir desempenho.
No entanto, em qualquer caso, esta é uma prática muito ruim.
Se você não estiver escrevendo um seletor muito geral que precise corresponder ao final do DOM, considere sempre subseletores diretos.
Considere o seguinte DOM:
<article class="content news-content"> <span class="title">Evento de notícias</span> <div class="content-body"> <div class="título conteúdo-título"> Confira isso </div> <p>Este é o conteúdo de um artigo de notícias</p> <div class="teaser"> <div class="title">Compre isto</div> <div class="teaser-content">Sim!</div> </div> </div> </artigo>
O seguinte CSS será aplicado a todos os três elementos com classe de título.
Então, para resolver os diferentes estilos na classe title na classe content e a classe title na classe teaser, isso exigirá seletores mais precisos para reescrever seus estilos novamente.
Não recomendado
.content .title {
tamanho da fonte: 2rem;
}recomendar
.content > .title {
tamanho da fonte: 2rem;
}
.content > .content-body > .title {
tamanho da fonte: 1,5rem;
}
.content > .content-body > .teaser > .title {
tamanho da fonte: 1,2rem;
} atributo de abreviatura
CSS fornece diversas propriedades abreviadas (como fonte) que devem ser usadas sempre que possível, mesmo quando apenas um valor é definido.
O uso de atributos abreviados é útil para eficiência e legibilidade do código.
Não recomendado
código css:
estilo border-top: nenhum; família de fontes: palatino, georgia, serif; tamanho da fonte: 100%; altura da linha: 1,6; fundo de preenchimento: 2em; preenchimento à esquerda: 1em; preenchimento à direita: 1em; preenchimento superior: 0;
recomendar
código css:
borda superior: 0; fonte: 100%/1.6 palatino, geórgia, serifa; preenchimento: 0 1em 2em;
0 e unidades
Omita as unidades após o valor "0". Não use unidades após um valor 0, a menos que haja um valor.
Não recomendado
código css:
preenchimento inferior: 0px; margem: 0em;
recomendar
código css:
preenchimento inferior: 0; margem: 0;
Notação hexadecimal
Sempre que possível, use notação hexadecimal de 3 caracteres.
Os valores das cores permitem uma representação como esta,
A representação hexadecimal de 3 caracteres é mais curta.
Sempre use números hexadecimais minúsculos.
Não recomendado
cor: #FF33AA;
recomendar
cor: #f3a;
Separador para ID e nome da classe
Use hífens (traços) para separar palavras em nomes de ID e classe. Para melhorar a compreensão da lição, não use nenhum caractere (inclusive nenhum) além de hífens (traços) para conectar palavras e abreviações no seletor.
Além disso, como padrão, o seletor de atributos padrão reconhece hífens (traços) como separadores de palavras para [atributo|=valor],
Portanto, é melhor usar hífens como separadores.
Não recomendado
.demoimage {}
.error_status {} recomendar
#ID do vídeo {}
.amostra de anúncios {}Hacks
Evite detecção de agente de usuário e “hacks” de CSS – tente primeiro uma abordagem diferente. As diferenças de estilo são facilmente resolvidas por meio de soluções alternativas e hacks por meio de detecção de agente de usuário ou filtros CSS especiais. Ambos os métodos devem ser considerados o último recurso para alcançar e manter uma base de código eficiente e gerenciável. Em outras palavras, detecção de agente de usuário e hacks no longo prazo
Prejudicará o projeto, pois os projetos devem sempre seguir o caminho de menor resistência. Dito isso, é fácil permitir que a detecção de agente de usuário e hacks sejam usados com muita frequência no futuro.
Ordem de declaração
Este é um esboço da ordem em que as propriedades CSS são escritas em um seletor. Isso é importante para garantir melhor legibilidade e escaneabilidade.
Como prática recomendada, devemos seguir a seguinte sequência (que deve estar na ordem da tabela abaixo):
Propriedades estruturais:
mostrar
posição, esquerda, superior, direita etc.
transbordar, flutuar, limpar etc.
margem, preenchimento
Propriedades expressivas:
fundo, borda etc.
fonte, texto
Não recomendado
.caixa {
família de fontes: 'Arial', sem serifa;
borda: 3px sólido #ddd;
esquerda: 30%;
posição: absoluta;
transformação de texto: maiúscula;
cor de fundo: #eee;
certo: 30%;
isplay: bloco;
tamanho da fonte: 1,5rem;
estouro: oculto;
preenchimento: 1em;
margem: 1em;
}recomendar
.caixa {
exibição: bloco;
posição: absoluta;
esquerda: 30%;
certo: 30%;
estouro: oculto;
margem: 1em;
preenchimento: 1em;
cor de fundo: #eee;
borda: 3px sólido #ddd;
família de fontes: 'Arial', sem serifa;
tamanho da fonte: 1,5rem;
transformação de texto: maiúscula;
}fim da declaração
Para garantir consistência e extensibilidade, cada instrução deve terminar com um ponto e vírgula e envolver cada instrução em uma nova linha.
Não recomendado
código css:
.teste {
exibição: bloco; altura: 100px
}recomendar
código css:
.teste {
exibição: bloco;
altura: 100px;
}Fim do nome do atributo
Use um espaço após os dois pontos no nome da propriedade. Por razões de consistência,
Sempre use um espaço entre o atributo e o valor (mas sem espaço entre o atributo e os dois pontos).
Não recomendado
código css:
h3 {
peso da fonte: negrito;
}recomendar
código css:
h3 {
peso da fonte: negrito;
}Separação de seletores e declarações
Sempre use uma nova linha para cada seletor e declaração de propriedade.
Não recomendado
código css:
a:foco, a:ativo {
posição: topo relativo: 1px;
}recomendar
código css:
h1,
h2,
h3 {
peso da fonte: normal;
altura da linha: 1,2;
}Separação de regras
As regras são sempre separadas por uma linha em branco (nova linha dupla).
recomendar
código css:
html {
plano de fundo: #fff;
}
corpo {
margem: automático;
largura: 50%;
}Citações CSS
Coloque seletores de atributos ou valores de atributos entre aspas duplas ("") em vez de aspas simples (").
Não use aspas para valores de URI (url()).
Não recomendado
código css:
@importar url('//cdn.com/foundation.css');
HTML {
família de fontes: 'open sans', arial, sans-serif;
}
corpo:depois {
conteúdo: 'pausa';
}recomendar
código css:
@importar url(//cdn.com/foundation.css);
HTML{
família de fontes: "open sans", arial, sans-serif;
}
corpo:depois {
conteúdo: "pausa";
}Aninhamento de seletor (SCSS)
No Sass você pode aninhar seletores, o que pode tornar o código mais limpo e legível. Aninhe todos os seletores, mas evite aninhar seletores sem nenhum conteúdo.
Se você precisar especificar alguns atributos de estilo para elementos filhos e o elemento pai não tiver atributos de estilo,
Cadeias de seletores CSS regulares podem ser usadas.
Isso evitará que seu script pareça muito complexo.
Não recomendado
código css:
// Não é um bom exemplo por não fazer uso de aninhamento
.contente {
exibição: bloco;
}
.content > .artigo de notícias > .title {
tamanho da fonte: 1,2em;
}Não recomendado
código css:
// Usar o aninhamento é melhor, mas não em todos os casos
//Evite o aninhamento quando não houver atributos e use cadeias de seletores
.contente {
exibição: bloco;
> .artigo de notícias {
> .título {
tamanho da fonte: 1,2em;
}
}
}recomendar
código css:
// Este exemplo adota a melhor abordagem durante o aninhamento, mas usa cadeias de seletores sempre que possível
.contente {
exibição: bloco;
> .artigo de notícias > .title {
tamanho da fonte: 1,2em;
}
}Introduzir linhas em branco no aninhamento (SCSS)
Deixe uma linha vazia entre os seletores aninhados e as propriedades CSS.
Não recomendado
código css:
.contente {
exibição: bloco;
> .artigo de notícias {
cor de fundo: #eee;
> .título {
tamanho da fonte: 1,2em;
}
> .artigo-nota de rodapé {
tamanho da fonte: 0,8em;
}
}
}recomendar
código css:
.contente {
exibição: bloco;
> .artigo de notícias {
cor de fundo: #eee;
> .título {
tamanho da fonte: 1,2em;
}
> .artigo-nota de rodapé {
tamanho da fonte: 0,8em;
}
}
}Consultas de mídia contextual (SCSS)
No Sass, você também pode usar consultas de mídia contextuais ao aninhar seus seletores.
No Sass, você pode usar consultas de mídia em qualquer nível de aninhamento.
O CSS resultante será transformado para que a consulta de mídia seja renderizada como um seletor encapsulado.
Esta tecnologia é muito conveniente,
Ajuda a manter o contexto ao qual a consulta de mídia pertence.
A primeira abordagem permite que você escreva primeiro seus estilos móveis e depois use consultas de mídia contextuais para fornecer estilos de desktop sempre que necessário.
Não recomendado
código css:
// Este primeiro exemplo móvel parece CSS simples onde toda a estrutura do SCSS é repetida
// na parte inferior de uma consulta de mídia Isso é propenso a erros e dificulta a manutenção, pois não é tão fácil de relacionar.
// o conteúdo na consulta de mídia para o conteúdo na parte superior (estilo móvel)
.página de conteúdo {
tamanho da fonte: 1,2rem;
> .principal {
cor de fundo: fumaça branca;
> .últimas notícias {
preenchimento: 1rem;
> .artigo de notícias {
preenchimento: 1rem;
> .título {
tamanho da fonte: 2rem;
}
}
}
> .conteúdo {
margem superior: 2rem;
preenchimento: 1rem;
}
}
> .page-footer {
margem superior: 2rem;
tamanho da fonte: 1rem;
}
}
@media screen e (largura mínima: 641px) {
.página de conteúdo {
tamanho da fonte: 1rem;
> .main > .latest-news > .news-article > .title {
tamanho da fonte: 3rem;
}
> .page-footer {
tamanho da fonte: 0,8rem;
}
}
}recomendar
código css:
// Este é o mesmo exemplo acima, mas aqui usamos consultas de mídia contextuais para colocar os diferentes estilos
// para diferentes mídias no contexto certo.
.página de conteúdo {
tamanho da fonte: 1,2rem;
@media screen e (largura mínima: 641px) {
tamanho da fonte: 1rem;
}
> .principal {
cor de fundo: fumaça branca;
> .últimas notícias {
preenchimento: 1rem;
> .artigo de notícias {
preenchimento: 1rem;
> .título {
tamanho da fonte: 2rem;
@media screen e (largura mínima: 641px) {
tamanho da fonte: 3rem;
}
}
}
}
> .conteúdo {
margem superior: 2rem;
preenchimento: 1rem;
}
}
> .page-footer {
margem superior: 2rem;
tamanho da fonte: 1rem;
@media screen e (largura mínima: 641px) {
tamanho da fonte: 0,8rem;
}
}
}Ordem aninhada e seletores pai (SCSS)
Ao usar a funcionalidade de aninhamento do Sass,
O importante é ter uma ordem de aninhamento clara,
A seguir está a ordem que um bloco SCSS deve ter.
Atributos de estilo do seletor atual <br/>Seletor de pseudoclasse do seletor pai (:primeira letra, :hover, :active etc)
Elementos de pseudoclasse (:before e :after)
Estilo de declaração do seletor pai (.selected, .active, .enlarged etc.)
Use o subseletor de consulta de mídia contextual do Sass como peça final
O exemplo a seguir deve ilustrar como essa ordenação alcançará uma estrutura clara ao usar o seletor pai Sass.
Recomendado
código css:
.produto-teaser {
// 1. Atributos de estilo
display: bloco embutido;
preenchimento: 1rem;
cor de fundo: fumaça branca;
cor: cinza;
// 2. Pseudoseletores com seletor pai
&:passar o mouse {
cor: preto;
}
// 3. Pseudoelementos com seletor pai
&:antes {
contente: "";
exibição: bloco;
borda superior: 1px cinza sólido;
}
&:depois {
contente: "";
exibição: bloco;
borda superior: 1px cinza sólido;
}
// 4. Classes de estado com seletor pai
&.ativo {
cor de fundo: rosa;
cor: vermelho;
// 4.2. Pseuso seletor no seletor de classe de estado
&:passar o mouse {
cor: vermelho escuro;
}
}
// 5. Consultas de mídia contextuais
@media screen e (largura máxima: 640px) {
exibição: bloco;
tamanho da fonte: 2em;
}
// 6. Subseletores
> .content > .title {
tamanho da fonte: 1,2em;
// 6.5. Consultas de mídia contextuais no subseletor
@media screen e (largura máxima: 640px) {
espaçamento entre letras: 0,2em;
transformação de texto: maiúscula;
}
}
}