Desenvolvimento CSS em sites de grande escala
Uma série de posts sobre desenvolvimento de CSS em sites como GitHub, Groupon e CodePen foram publicados recentemente. Eles são interessantes de ler e fornecerão muitas dicas e ideias para criar suas próprias diretrizes de desenvolvimento CSS. Aqui estão links para sete postagens de blog que fornecem uma visão geral das ferramentas, filosofias e técnicas usadas para desenvolver CSS em sites e aplicativos de grande escala.
1. CSS no Groupon
Mike Aparicio, engenheiro de UI do Groupon, lembra como o popular site de ofertas diárias criou seu próprio framework CSS chamado Toolstrap , depois de debater se deveria ou não usar o Bootstrap. Eles usam SMACSS como filosofia de desenvolvimento.
2. CSS do CodePen
Esta postagem no blog de Chris Coyier descreve o CSS no CodePen. CodePen usa SCSS como seu pré-processador e Autoprefixador para lidar com o prefixo do fornecedor de propriedades CSS.
3. CSS do GitHub
De acordo com Mark Otto, cocriador do Bootstrap e designer do GitHub, o site de hospedagem de código usa SCSS como seu pré-processador. O site tem mais de 100 folhas de estilo de origem individuais que são compiladas em apenas duas folhas de estilo para produção.
4. CSS no Lonely Planet
Ian Feather escreveu sobre desenvolvimento CSS na Lonely Planet (a editora de guias de viagem). O site usa Sass e segue uma abordagem BEM e OOCSS modificada para a arquitetura CSS. O site também mantém um guia de estilo de design chamado Rizzo .
5. CSS na Hootsuite
Hootsuite, um aplicativo de gerenciamento de mídia social, tem mais de 40 engenheiros, e quatro deles são dedicados a HTML e CSS. O pré-processador do app é LESS, segue uma filosofia CSS inspirada no BEM e SUIT CSS , segundo Steve Mynett, designer e desenvolvedor da Hootsuite.
6. CSS do buffer
Brian Lovin, gerente de produto da Buffer, escreveu sobre o CSS de seu aplicativo, onde menciona que eles usam CSS idiomático como um guia de estilo. A folha de estilo principal do site tem 3.094 seletores e (bastante) pesa 271kb. Eles usam LESS como pré-processador de escolha.
7. CSS no Trello
Esta postagem no blog de Bobby Grace, designer do Trello, um aplicativo de gerenciamento de projetos baseado na web, fala sobre o CSS do aplicativo. A postagem descreve a estrutura do arquivo de folha de estilo, as ferramentas que eles usam (como CSS Shrink para reduzir o tamanho de arquivo de suas folhas de estilo), seu estilo de codificação CSS e muito mais.