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
![Page 1: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/1.jpg)
SMACSS (SMACKS)COMO ESTRUTURAR CSS PARA PROJETOS EM LARGA ESCALA
by / Rafael Lyra @rafaellyra
![Page 2: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/2.jpg)
SMACSS É UM STYLEGUIDE, NÃO UMFRAMEWORK
![Page 3: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/3.jpg)
5 PRINCÍPIOS DO SMACSS
![Page 4: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/4.jpg)
1. CATEGORIZAR
![Page 5: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/5.jpg)
BASEresetdefault*
![Page 6: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/6.jpg)
LAYOUTbox model (width, height, float, margin...)
![Page 7: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/7.jpg)
MODULE
![Page 8: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/8.jpg)
STATEClassesPseudo-classesAttribute SelectorsMedia Queries
![Page 9: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/9.jpg)
THEME
![Page 10: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/10.jpg)
2. CONVENÇÃO DE NOMENCLATURAPrefixos*Documentação*
![Page 11: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/11.jpg)
3. DESACOPLAR O CSS DO HTML
![Page 12: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/12.jpg)
4. MELHORAR A SEMÂNTICA
![Page 13: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/13.jpg)
5. DESIGN BASEADO EM ESTADOS
![Page 14: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/14.jpg)
SMACSS NÃO É: UMA RELIGIÃO / SEITA RELIGIOSA
![Page 15: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/15.jpg)
O QUE MAIS?
![Page 16: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/16.jpg)
INTEGRAÇÃO COM JAVASCRIPT!Scripts são escritos para modulos individuais.Estados são modificados, sem estilos inline.
![Page 17: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/17.jpg)
SMACSS É PRINCIPALMENTE: UM CONJUNTODE BOAS PRÁTICAS.
ModularizaçãoConvençõesOrganizaçãoPerformancePrototipação
![Page 18: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/18.jpg)
Depth of Applicability (Problem)*#comments .comment .meta .commentnumber a {}.comment-number > a {}
![Page 19: SMACSS - Como estruturar CSS para projetos em larga escala](https://reader037.fdocuments.net/reader037/viewer/2022100311/559d0a361a28abe8478b46d5/html5/thumbnails/19.jpg)
OBRIGADO, DE <3RAFAEL LYRA