Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SUIT CSS como padrão de escrita de estilos

João Paulo
October 03, 2015

SUIT CSS como padrão de escrita de estilos

A intenção da palestra é dar uma visão geral sobre alguns padrões de escrita de estilos (OOCSS, SMACSS, BEM), destacar seus benefícios, aprofundar nas convenções de nomenclatura do SUIT CSS e mostrar através de exemplos porque o adotei na minha empresa. Palestra realizada no PHPeste 2015 na trilha javascript organizada pelo ParaibaJS.

João Paulo

October 03, 2015
Tweet

Other Decks in Technology

Transcript

  1. — Phil Karlton “There are only two hard things in

    Computer Science: cache invalidation and naming things.”
  2. 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
  3. 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 }
  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 [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 }
  5. 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.
  6. 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 ...
  7. 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
  8. 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
  9. ? “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?” …
  10. 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
  11. 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">
  12. 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 { /* ... */ }
  13. 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 { /* ... */ }
  14. Mas o modificador não era pra ser “--" ? “--"

    é erroneamente atribuído ao BEM https://en.bem.info/method/naming-convention/
  15. E se unirmos pontos fortes de cada um? Base do

    OOCSS + Variação do BEM + States do SMACSS
  16. — 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.”
  17. 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
  18. Utilities Classes com propriedades de posição e estrutura Aplicadas a

    qualquer elemento de um componente u-[sm-|md-|lg-]<utilityName>
  19. 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>
  20. Namespace É opcional e usado para evitar potenciais coflitos 1

    .twt-Button { /* ... */ } 2 .twt-Tabs { /* ... */ } [<namespace>-]<ComponentName>[--modifierName|-descendentName]
  21. ComponentName Deve ser escrito em UpperCamelCase - :’( 1 <article

    class="MyComponent"> 2 ... 3 </article> 1 .MyComponent { /* ... */ } [<namespace>-]<ComponentName>[--modifierName|-descendentName]
  22. 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]
  23. 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]
  24. .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 { /* ... */ }