SMACSS - Como estruturar CSS para projetos em larga escala
Click here to load reader
-
Upload
rafael-lyra -
Category
Technology
-
view
342 -
download
1
description
Transcript of 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