Então, primeiro de tudo - essa não é uma batalha comum. Não se trata de CSS versus CSS-in-JS , nem de atomic CSS versus BEM , nem de LESS vs SASS . Esta batalha é sobre a ordem.
Esta batalha é entre ORDER e CHAOS. E entre ORDEM e ... outra ORDEM. Em resumo - sobre uma maneira melhor de classificar propriedades CSS. Nem mais nem menos.
Em resumo - existem três maneiras de fazer isso:
- não faça isso. Escreva qualquer CSS possível. Esta é a maneira mais popular
- agrupe propriedades por sentido. Basta colocar algumas coisas juntas. Esta é uma maneira bastante popular.
- ordenar todas as propriedades em ordem alfabética. A maneira mais fácil, mas menos popular.
A partir de agora, vamos esquecer o primeiro caminho. Não é o caminho.
2012
Houve uma boa enquete do css-tricks , e aqui estão os resultados:
Já é 2019, o que mudou?
A diferença entre alpha sort , ABCSS como é conhecida, e um grouping é bastante sólida, mas é melhor deixar claro
Estado inicial
Vamos começar com um CHAOS ideal a partir desta edição mais bonita
.wrapper { top: 20px; margin-left: 20px; display: flex; position: absolute; height: 100%; margin-bottom: 20px; border-radius: 5px; color: red; justify-content: center; margin-left: 2px; left: 0px; width: 100%; border: 1px solid red; }
Linda? É assim que o CSS comum se parece depois de alguns anos sem nenhum controle.
ABCSS
Classifique em ordem alfabética
.wrapper { border: 1px solid red; border-radius: 5px; color: red; display: flex; height: 100%; justify-content: center; left: 0px; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; position: absolute; top: 20px; width: 100%; }
Apenas ajudou a perceber que tínhamos duas margin-lefts . Seria mais fácil adicionar uma nova propriedade na próxima vez, especialmente se toda a classificação for feita automaticamente no nível da stylelint .
A principal vantagem da classificação alfabética - localização fácil da propriedade. Você está apenas digitalizando tabela, como um glossário, e sim, aqui está a propriedade que estou procurando.
A principal desvantagem - a height vai antes da width , a left vai antes do top e há alguma distância entre elas. A classificação alfabética está misturando o contexto .
Eu usei alguma ferramenta online para fazer isso. A grande quantidade de ferramentas on-line, plug-ins para IDEs e ferramentas CLI oferece suporte à classificação alfa imediatamente. - fácil de usar.
Grupos
Classifique-o em grupos
.wrapper{ position: absolute; top: 20px; left: 0; display: flex; justify-content: center; width: 100%; height: 100%; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; color: red; border: 1px solid red; border-radius: 5px; }
Desta vez, trata-se mais da separation of concerns - todas as propriedades são agrupadas (agrupadas) em baldes de certa forma. O princípio de pedido é conhecido como "Entrada externa"
- Propriedades do layout (posição, flutuação, limpeza, exibição)
- Propriedades do modelo de caixa (largura, altura, margem, preenchimento)
- Propriedades visuais (cor, plano de fundo, borda, sombra da caixa)
- Propriedades da tipografia (tamanho da fonte, família da fonte, alinhamento do texto, transformação do texto)
- Propriedades diversas (cursor, estouro, índice z)
E o problema - há mais de um padrão em torno dele. Para ser mais concreto - mais de cinco. E isso é um problema. Ou não?
E, mais uma vez - a classificação é feita por uma ferramenta, o CSSCOMB desta vez.
A principal vantagem - todas as propriedades são agrupadas pelo senso comum. Todas as propriedades flexíveis - juntas. Todas as posições, esquerda, direita, superior, inferior - juntas.
- Se você precisar adicionar algo - adicione em algum lugar e deixe uma ferramenta fazer o trabalho.
- Se você precisar encontrar algo - procure um grupo e, em seguida, procure dentro de um grupo. A propósito - isso é MUITO MAIS rápido que uma pesquisa linear em um caso anterior.
Isso requer alguns esclarecimentos:
- com classificação alfabética - você está procurando o início da linha, apontando o início e o fim da "sua" primeira letra. Então você vai pensar neste sub-bloco e pronto. Isso é basicamente O (n). Após algum treinamento - O (n / 2), desde que você saiba "onde" procure um suporte.
- com a classificação do grupo - você sabe "onde" procurar um suporte - os grupos têm uma posição constante e depois passam por um pequeno subconjunto, e pronto. Isso é basicamente - O (3), não "n".
A principal desvantagem - você tem que aprender a separar preocupações. 99% dos entrevistados disseram que este é um grande problema - escrever CSS agrupado , mas é um trabalho de ferramenta, não seu. E sim, existe mais de um padrão, mas não há problema em fazer o pedido por uma ferramenta.
A enquete
Então, eu fiz algumas pesquisas em torno deste problema.
- 2012y, os css-truques relataram que 45% dos desenvolvedores usam grupos, 14 - tipo alfa, 39 não usam nada
- pesquisa criada hoje (e ainda não concluída) - 50% para grupos, 25% para alfa, 25% não usam nada
Melhores motivos para usar grupos:
- Grupos é a maneira mais natural de juntar as coisas: é assim que você as escreve. Imagine se você tivesse que escrever palavras em uma frase em ordem alfabética. As partes superior, direita, inferior e esquerda naturalmente se juntam, logo após a posição: absoluto ( twitter ).
- Uma boa razão para os grupos serem CSS atômico - o átomo / utilitário geralmente está vinculado a um "grupo", é um caminho natural para estruturas funcionais. Portanto, CSS "normal" pode parecer átomos combinados - ou seja, agrupados ( twitter ).
- Equipes menores podem preferir agrupar propriedades relacionadas (por exemplo, posicionamento e modelo de caixa) juntas idiomática-css .
- Existem prós e contras nos dois sentidos. Por um lado, a ordem alfabética é universal (pelo menos para idiomas que usam o alfabeto latino), portanto não há argumento sobre a classificação de uma propriedade antes da outra. No entanto, parece-me extremamente estranho ver propriedades como inferior e superior não muito próximas uma da outra. Por que as animações devem aparecer antes do tipo de exibição? Existem muitas esquisitices com a ordem alfabética. Por outro lado, ordenar propriedades por tipo faz todo sentido. Todas as declarações relacionadas a fontes são reunidas, as partes superior e inferior são reunidas e a leitura de um conjunto de regras é como ler uma história curta. Guia SASS .
- os arquivos classificados em grupos são menores em 2% após o gzip. Magia Este artigo apresenta 5 maneiras diferentes de solicitar adereços css. estudar
Algumas razões para não usar
- "Grupos" é ótimo se isso significa o mesmo para todos. Geralmente não. Provavelmente, você pode automatizar a imposição de agrupamentos e, em seguida, está certo. twitter
- Equipes maiores podem preferir a simplicidade e a facilidade de manutenção fornecidas com a ordem alfabética. novamente idiomática-css
Razões para usar alfabético:
- Eu costumava fazer por "grupo", mas é muito subjetivo. Além disso, existem muitos complementos para o alpha ordenar um conjunto de linhas. O estilo calculado das ferramentas de desenvolvimento do Chrome também é alfa.
- alfabeticamente. qualquer outra coisa significa que qualquer pessoa que participe do projeto também precisa aprender seu padrão.
- minha própria empresa está usando a classificação alfa (isso foi uma surpresa para mim).
- O Google CSS Guide recomenda ABCSS, sem explicação.
Então, TLDR
- a maioria de nós (e eu geralmente incluído) não está nem aí para encomendar adereços CSS. A maioria de nós também não está nem aí para o CSS.
- O CSS-in-JS também não incentiva as melhores práticas.
- As melhores práticas, como CSS atômico, são besties com grupos (por design), enquanto o BEM, infelizmente, não tem nada a ver com ordenação de propriedades :(
Na verdade, é um pouco inesperado, que essa coisa opinativa não esteja bem estabelecida e definida, e eu tenho que escrever este artigo.
Curiosidade - grupos e ordem alfabética podem ser melhores, por exemplo, para impedir a importação de seus módulos, como eslint-plugin-import
Existem grupos primeiro, e a ordem alfabética é usada apenas dentro de um grupo.
Até agora, ouvi argumentos bastante razoáveis a favor do grouping , mas não um único (razoável para mim) a favor do tipo alfa.
Veja também:
Escolha seu lado e explique sua posição. Tenho pipoca para compartilhar.