Modularização do CSS
Postado por: Pedro Rogério emUma das coisas que eu aprendi nessa minha nova jornada foi a tornar o meu CSS modular, mas o que seria isso? É basicamente você dividir o CSS do seu site em vários arquivos, onde você ganha mais agilidade em uma possível atualização, o site no browser do usuário também carrega mais rápido, pois evita de se carregar CSS desnecessário, e mais outros milhares de benefícios.
Se você não tem nem idéia por onde começar, comece divindo o CSS em arquivos do tipo, um para o topo, outro para o menu, outro para conteúdo e outro para rodapé, depois é só criar as chamadas para o CSS no header do seu site. Você vai ver como sua vida irá melhorar e muito com isso.
<update> Acho que faltou um exemplo claro para o pessoal entender melhor o poder da modularização, pois bem, dêem uma olhada nesse site que fizemos recentemente lá na empresa onde trabalho: www.hottoys.com.br, ele é composto de 2 arquivos php, e todas as alterações feitas no layout são graças as CSS. </update>
Random Posts
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Pois é, Pedro. E não é só isso. Estou criando um sistema de gerenciamento de conteúdo para os sites dos meus clientes, bastante flexível no que se refere aos módulos que ele possui. E cada módulo possui o seu CSS. Assim, não é necessário carregar todos os CSS’s, apenas o do módulo ativo. Além disso, fica fácil fazer mudanças.
Abraços
Isso não aumentaria as requisições HTTP (que falam pra fazer no menor número possível) e deixaria, em tese, o site mais lento?
E mesmo assim, valeria a pena?
Pois é, as requisições de http podem tornar o site mais lento dependendo da quantidade. Eu também trabalho com o css separado mas da seguinte forma: existe um global.css onde estão as regras que todos as páginas do site irão usar (Ex.: header, footer, body, content…). O que faço é separar os css’s que irão dar uma forma diferenciada para “determinada página do site”. Suponha que eu tenha uma página que se difere das outras, daí sim eu faço um css que só chamarei nesta página.
Não to dizendo que não deva separar o css, na realidade isto ajuda e muito na hora de trabalhar, só acho que separar o css para (Ex.: header, footer, body, content…) iria criar muitas requisições tornando o site mais lento.
Eu acho que o que o Pedro quis falar não foi fazer isso em todas as suas aplicações. Ele apenas deu uma dica para quem não tem o costume de dividir o CSS. Claro que essa dica não vale para pessoas mais experientes. O Certo seria fazer como o Rafael falou: Criar um css para cada modulo, pois cada modulo terá que carregar “apenas” o css equivalente e o css global.
Independente de ser modular ou nao o sistema/site.
Creio que para melhor administração do layout e do projeto no todo é sempre bom dividir o css.
No meu caso eu trabalho assim:
Struct: Compoem o layout, header, content, footer
Definations: sao classes gerais que eu crio para o site
Redefinations: sao as tags redefinidas diretamente na raiz.
independente de ser mais experiente ou nao eu acho que isso vai de cada desenvolvedor, nao vejo o fato de dividir os arquivos css em SER BOM ou NAO SER. é questao de estilo, me desculpe masi 3 requisiçoes de 2k cada nao pesa um site quanto voces pensam.
abracos.
Essa ideia de ter um global e um css para cada modulo é muito boa. Eu utilizei em alguns casos e foi bem legal.
O desenvolvedor tem que ter em mente o que é melhor para ele e sua equipe. E sempre visar a facilidade em alterações. Como o Gabriel falou, dependendo do tamanho não pesa nada!
Grande abraço!
Claro, modularização vale a pena pra grandes arquivos CSS, onde cada parte do site tem um CSS complexo. Em folhas de estilo em cascata do tipo “#header”, “#footer” e “#menu” não vale a pena.
Pois é, CSS modular é o máximo. Mas você bem que podia avisar que o site exemplo era de “briquedinhos”..Ok a página inicial do site, mas no post você podia ter dado uma dica, não custava nada!
Mas que a página ficou bem legal, incluindo a Tv e tudo, ficou…
concordo com o camelo, devia ter indicado no post uma referência do que se tratava esse site exemplo! Tô no serviço, e cliquei… muito sem noção heim?