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. SUIT CSS COMO PADRÃO DE ESCRITA DE ESTILOS

  2. João Paulo Barbosa Co-founder and Developer @ BRZ DIGITAL

  3. brzdigital.com.br
 medium.com/@jpaulobneto github.com/jpaulobneto
 twitter.com/jpaulobneto

  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…

  6. …brincadeira!

  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?” …
  16. Existem vários! OOCSS
 BEM
 SMACSS
 SUIT CSS
 … http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/

  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
  23. None
  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!
  26. None
  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 { /* ... */ }
  37. None
  38. Na prática github.com/jpaulobneto/suit-up

  39. Obrigado http://joind.in/talk/view/15202