SUIT CSS como padrão de escrita de estilos
•
0 gostou•407 visualizações
O documento descreve o framework de estilos SUIT CSS, apresentando suas convenções de nomenclatura para classes. As convenções dividem classes em Utilities, para propriedades estruturais aplicáveis a qualquer elemento, e Components, para elementos específicos. Utilities usam prefixos como "u-" e siglas para breakpoint, enquanto Components usam nomes de classe em UpperCamelCase separados por hífen para indicar modificadores e descendentes.
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (12)
Semelhante a SUIT CSS como padrão de escrita de estilos
Semelhante a SUIT CSS como padrão de escrita de estilos (20)
SUIT CSS como padrão de escrita de estilos
- 1. SUIT CSS COMO PADRÃO DE ESCRITA DE ESTILOS
- 2. João Paulo Barbosa Co-founder and Developer @ BRZ DIGITAL
- 4. — Phil Karlton “There are only two hard things in Computer Science: cache invalidation and naming things.”
- 5. Então, vamos começar falando sobre cache…
- 7. Nossa intenção hoje é diminuir o esforço cognitivo de dar nome as coisas!
- 8. Seletores de tags provavelmente foram os primeiros que usamos 1 <!-- index.html --> 2 <p>Hello World</p> 1 /* index.css */ 2 p { 3 text-align: center; 4 } https://developer.mozilla.org/pt-PT/docs/Web/CSS/Como_come%C3%A7ar/Seletores
- 9. Depois aprendemos a usar seletores de id… 1 <!-- index.html --> 2 <div id="message"> 3 <p>Hello World</p> 4 </div> 1 /* index.css */ 2 div#message { 3 text-align: center; 4 }
- 10. 1 <!-- index.html --> 2 <section id="message"> 3 <header> 4 <h2>Mensagem</h2> 5 </header> 6 <p>Hello World!</p> 7 </section> 1 /* index.css [evite] */ 2 section#message { 3 text-align: center; 4 } 1 <!-- index.html --> 2 <section id="message"> 3 <header> 4 <h2>Mensagem</h2> 5 </header> 6 <p>Hello World!</p> 7 </section> 1 /* index.css */ 2 #message { 3 text-align: center; 4 }
- 11. 1 <!-- index.html [X] --> 2 ... 3 <div id="message"> 4 Campo obrigatório 5 </div> 6 ... 7 <div id="message"> 8 Email inválido 9 </div> 10 ... 1 /* index.css */ 2 #message { 3 text-align: center; 4 } 1 <!-- index.html --> 2 ... 3 <div class="message"> 4 Campo obrigatório 5 </div> 6 ... 7 <div class="message"> 8 Email inválido 9 </div> 10 ... 1 /* index.css */ 2 .message { 3 color: red; 4 } … e seletores de classe.
- 12. 1 <!-- index.html --> 2 ... 3 <body class="home"> 4 ... 5 <section id="news"> 6 <header> 7 <h2 class="title">Notícias</h2> 8 </header> 9 <article class="item"> 10 <header> 11 <h2 class="title"><a href="javascript:">Lorem ipsum</a></h2> 12 </header> 13 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 14 <footer> 15 <p class="author">Paulo Barbosa</p> 16 </footer> 17 </article> 18 </section> 19 ... 20 </body> 21 ...
- 13. 1 /* index.css */ 2 #news .title { color: … } 3 #news .author { color: … } 4 #news a { color: … } 5 6 #news .item { background: … } 7 #news .item .title { color: … } 1 /* index.css */ 2 .home #news .title { color: … } 3 .home #news .author { color: … } 4 .home #news a { color: … } 5 6 .home #news .item { background: … } 7 .home #news .item .title { color: … } Estilo vinculado a um conteúdo específico = dificuldade de reuso
- 14. Avançamos e mais necessidades aparecem Organização do Código Reaproveitamento de código Comunicação clara e sem ruídos Coesão e coerência, principalmente numa equipe Agilidade
- 15. ? “Como eu devo chamar isso?” “Qual a melhor forma de reaproveitar esse código?“ “Droga essa não era a melhor forma!” “Porque Fulano fez isso?” …
- 17. OOCSS Object Oriented CSS Objeto CSS Propriedades de Estrutura X Propriedades de Skin O local do objeto não manda aqui! Sem nesting. Variações são extensões de objetos base
- 18. OOCSS 1 <!-- EXEMPLOS --> 2 <button class="button anchor-icon">Abrir</button> 3 <a class="link anchor-icon">Tableless</a> 4 <!-- Extendendo --> 5 <div class="graph graph-big"> 6 <!-- Algumas classes de estrutura --> 7 <div class="graph graph-big clearfix wrapper">
- 19. SMACSS Scalable and Modular Architecture for CSS Base, Layout, Module, State e Theme. 1 /* "non ecziste!" */ 2 #sidebar .media { /* ... */ } 3 /* :+1: */ 4 .media.media-sidebar { /* ... */ } 5 .l-component-name { /* ... */ } 6 .box .title { /* ... */ } 7 .box .box-title { /* ... */ } 8 .is-active { /* ... [!important] */ } 9 /* Evite */ 10 .box h2 { /* ... */ }
- 20. BEM Block, Element, Modifier .block[__element_modifier] { /* … */ } nomes compostos separados por “-“ 1 <div class="report-graph"> 2 <div class="report-graph__bar">...</div> 3 <div class="report-graph__bar report-graph__bar_size_big">...</div> 4 </div> 1 .report-graph { /* ... */ } 2 .report-graph__bar { /* ... */ } 3 .report-graph__bar.report-graph__bar_visible { /* ... */ } 4 .report-graph__bar.report-graph__bar_size_big { /* ... */ }
- 21. Mas o modificador não era pra ser “--" ? “--" é erroneamente atribuído ao BEM https://en.bem.info/method/naming-convention/
- 22. E se unirmos pontos fortes de cada um? Base do OOCSS + Variação do BEM + States do SMACSS
- 24. — Nicolas Gallagher (@necolas) “SUIT CSS is a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools are available as modules. SUIT CSS plays well with React, Ember, Angular, and other component-based approaches to UI development.”
- 25. O que vamos abordar aqui são as convenções de nomenclatura do SUIT CSS!
- 27. SUIT CSS naming conventions Nomes de classes estruturadas Hífens significativos (olha o preconceito!) CamelCase (lowerCamelCase e UpperCamelCase) Dividido em duas grandes categorias: Utilities e Components https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
- 28. Utilities Classes com propriedades de posição e estrutura Aplicadas a qualquer elemento de um componente u-[sm-|md-|lg-]<utilityName>
- 29. u-[sm-|md-|lg-]<utilityName> 1 <!-- Utilities --> 2 <div class="u-cf"> 3 <a class=“u-floatLeft u-sm-floatRight“ href="{{url}}"> 4 <img class="u-block" src="{{src}}" alt=""> 5 </a> 6 <p class="u-sizeFill u-textBreak"> 7 … 8 </p> 9 </div>
- 30. Responsive Utilities u-[sm-|md-|lg-]<utilityName> Cadê o “xs-“ aí?
- 31. Components Uma excelente forma de saber quem é quem! [<namespace>-]<ComponentName>[--modifierName|-descendentName]
- 32. Namespace É opcional e usado para evitar potenciais coflitos 1 .twt-Button { /* ... */ } 2 .twt-Tabs { /* ... */ } [<namespace>-]<ComponentName>[--modifierName|-descendentName]
- 33. ComponentName Deve ser escrito em UpperCamelCase - :’( 1 <article class="MyComponent"> 2 ... 3 </article> 1 .MyComponent { /* ... */ } [<namespace>-]<ComponentName>[--modifierName|-descendentName]
- 34. Modifiers Componente modificador é uma classe que altera a apresentação de um componente base de alguma forma 1 <button class="Button Button--default" type="button">...</button> 1 /* Core button */ 2 .Button { /* ... */ } 3 /* Default button style */ 4 .Button--default { /* ... */ } 5 /* Made in BRZ :) */ 6 .Button.Button--default { /* ... */ } [<namespace>-]<ComponentName>[--modifierName|-descendentName]
- 35. Descendente Classe ligada a um nó que é descendente de um componente 1 <article class="Tweet"> 2 <header class="Tweet-header"> 3 <img class="Tweet-avatar" src="{{src}}" alt="{{alt}}"> 4 ... 5 </header> 6 <div class="Tweet-bodyText"> 7 ... 8 </div> 9 </article> 1 /* Core Component */ 2 .Tweet { /* ... */ } 3 /* Descendents */ 4 .Tweet-header { /* ... */ } 5 .Tweet-avatar { /* ... */ } 6 .Tweet-bodyText { /* ... */ } [<namespace>-]<ComponentName>[--modifierName|-descendentName]
- 36. .is-stateOfComp Lembra do state do SMACSS? “.is-stateName” deve ser usado em conjunto 1 <article class="Tweet is-expanded"> 2 ... 3 </article> 1 .Tweet { /* ... */ } 2 .Tweet.is-expanded { /* ... */ }