Tableless - Desenvolvimento inteligente com Padrões Web

28/02/2011
Client-Side

Drops 3 – Duas formas de modular seu CSS

Duas maneiras de modular seu código CSS.

Por

Existem várias formas de modular seu CSS, vou citar duas delas. A primeira delas é modulando seu código por página. A segunda é modulando por áreas do site.

Veja todos os nossos drops no Soundcloud.

Se preferir faça o download do arquivo em Mp3 ou OGA. Ou inscreva no iTunes.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.channel23.com.br d4ng3rmax

    O único problema da segunda opção é se você tiver uma quantidade muito grande de arquivos css. Isso impacta na quantidade de requests do website e isso pode se transformar num problema, dependendo do site.

  • http://www.erikhenrique.com.br Erik Henrique

    É o Diego Eis que esta falando?

    Muito bom esse “drops” torna o aprendizado e o blog mais interativo.

    Parabens!

  • http://www.gustavovenceslau.com Gustavo Venceslau

    A melhor forma de organizar o CSS é trabalhando dessa forma, além de dividir os arquivos por partes do site, definir comentários, normatizar tags e estruturar de maneira inteligente nos ajuda e muito na manutenção e possíveis alteraçõs desse CSS.

  • http://tutorial-city.net Eduardo Matos

    Ter uma dezena de arquivos não é uma boa ideia em produção, então uma boa escolha pra manter o código modularizado(em desenvolvimento) e em um único arquivo(em produção) é usar um framework que junte tudo (como o Compass por exemplo).

  • http://twitter.com/diegoeis/ Diego Eis

    Eu mesmo!

  • estenio

    bom eu tenho uns conceitos que da muito certo aqui na empresa, primeiro é que se o site for muito grande ele vai necessitar de um css mestre e páginas auxiliares que serão relacionadas a ele se for pequeno faço tudo em um arquivo só(lembrando que no meu caso não programo mais para ie6 somente 7 em diante).
    Outra coisa que eu faço é escrever o código horizontalmentel, ou seja ao invés de escrever um comando e dar um enter eu escrevo um comando e dou um espaço.
    Antes eu abominava este modo de escrever mas se você separar direitinho as partes do site com seus respectivos nomes e com uma linha em branco entre os blocos ficará bem organizado e economizara linhas do seu css(isso na minha visão)

    Uma coisa importante na modularização é que na página mestra você pode colocar um determinado código que será utilizado em muitos lugares assim dando a liberdade para que na página auxilia seja feita a mudança necessária para tal sem a necessidade de adicionar classes assim mantendo uma semantica para se obter melhores resultados nos motores de busca.

  • http://www.cledison.com.br Cledison Eduardo Fritzen

    Sem dúvida a melhor forma de organização é modular por blocos do site. O único ponto negativo é o número de request que pode gerar, mas ainda compensa.
    Não considero mais o IE6, já foi o tempo do ie6.css e os comentários condicionais.

  • http://www.twitter.com/LFeh Felipe

    Eu também modulo por áreas do site e áreas genéricas. Acho melhor e mais organizado.

    A diferença é que modulo no próprio CSS, não vejo otimização de trabalho ao criar vários arquivos. Eu separo por áreas em um arquivo só e fica totalmente legível.

    Antes de enviar para o servidor compacto tudo, retirando comentários, e deixando tudo em uma linha.

    Mantenho o CSS original para modificações e compacto novamente sempre que envio para o servidor.

    Abraços.

  • http://tutsmais.com.br/blog/ Ofelquis

    [code lang='html']

    Muito foda

    [/code]