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

SUIT CSS como padrão de escrita de estilos

Avatar for João Paulo 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.

Avatar for João Paulo

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 { /* ... */ }