Organize Seu Código

A primeira vez que vi conteúdo em um arquivo CSS foi quando decidi ver o código-fonte do site pessoal de Eliot J Stocks (como você faz se você for um desenvolvedor web) e vi a seção de conteúdo de arte ASCII bem alinhada e limítrofe no topo de seu arquivo e pensamento – ‘que perdedor’. Agora, eu nem pensaria em escrever uma folha de estilo sem uma seção de conteúdo.

Isso não apenas torna seu código mais apresentável, mas também o torna mais fácil de organizá-lo (especialmente se você escrever oocss). Você será capaz de encontrar certas classes muito mais rápido e, se precisar remover uma seção do seu site, como a navegação, é menos provável que tenha um CSS não utilizado.

Se você usar um pré-processador como sass ou menos (e agora roole ), adicionar uma seção de conteúdo faz ainda mais sentido, pois você pode localizar facilmente todas as suas variáveis, mixins e consultas de mídia. Obviamente, se o código for demais para uma seção, você sempre poderá colocá-lo em um novo arquivo e importá-lo para o principal. Uma seção de conteúdo realmente só faz sentido se você tiver várias seções em um arquivo.

Se você está familiarizado com smaccs, provavelmente está escrevendo consultas de mídia para diferentes objetos do seu site, em vez de colocar todas as consultas de mídia para um ponto de interrupção em um arquivo desesperado. Ter um conteúdo também ajuda com isso, pois você pode ver imediatamente quais objetos têm consultas de mídia, os pontos de interrupção para os quais elas são feitas e os objetos que não têm.

/*

Contents

================================


1. Navigation

2. Hero Section

3. Flavours

a. Features

b. Install

4. Footer

5. Shared Styles

a. extends

b. fonts


================================


*/

Concluindo, ter uma seção de conteúdo para seus arquivos CSS (e até mesmo JavaScript) é útil de várias maneiras. Você pode não achar isso incrivelmente útil no início, mas depois de algumas tentativas, fará muito sentido.