SMACSS - Como estruturar CSS para projetos em larga escala

SMACSS (SMACKS)COMO ESTRUTURAR CSS PARA PROJETOS EM LARGA ESCALA

by / Rafael Lyra @rafaellyra

SMACSS É UM STYLEGUIDE, NÃO UMFRAMEWORK

5 PRINCÍPIOS DO SMACSS

1. CATEGORIZAR

BASEresetdefault*

LAYOUTbox model (width, height, float, margin...)

MODULE

STATEClassesPseudo-classesAttribute SelectorsMedia Queries

THEME

2. CONVENÇÃO DE NOMENCLATURAPrefixos*Documentação*

3. DESACOPLAR O CSS DO HTML

4. MELHORAR A SEMÂNTICA

5. DESIGN BASEADO EM ESTADOS

SMACSS NÃO É: UMA RELIGIÃO / SEITA RELIGIOSA

O QUE MAIS?

INTEGRAÇÃO COM JAVASCRIPT!Scripts são escritos para modulos individuais.Estados são modificados, sem estilos inline.

SMACSS É PRINCIPALMENTE: UM CONJUNTODE BOAS PRÁTICAS.

ModularizaçãoConvençõesOrganizaçãoPerformancePrototipação

Depth of Applicability (Problem)*#comments .comment .meta .commentnumber a {}.comment-number > a {}

OBRIGADO, DE <3RAFAEL LYRA