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.

Transcript

1. SUIT CSS
   COMO PADRÃO DE ESCRITA DE ESTILOS
   

   View Slide

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

   View Slide

3. brzdigital.com.br

   medium.com/@jpaulobneto
   github.com/jpaulobneto

   twitter.com/jpaulobneto
   

   View Slide

4. — Phil Karlton
   “There are only two hard things in Computer
   Science: cache invalidation and naming things.”
   

   View Slide

5. Então, vamos começar
   falando sobre cache…
   

   View Slide

6. …brincadeira!
   

   View Slide

7. Nossa intenção hoje é
   diminuir o esforço cognitivo
   de dar nome as coisas!
   

   View Slide

8. Seletores de tags provavelmente foram os primeiros que usamos
   1
   2 Hello World
   1 /* index.css */
   2 p {
   3 text-align: center;
   4 }
   https://developer.mozilla.org/pt-PT/docs/Web/CSS/Como_come%C3%A7ar/Seletores
   

   View Slide

9. Depois aprendemos a usar seletores de id…
   1
   2
   3 Hello World
   4
   1 /* index.css */
   2 div#message {
   3 text-align: center;
   4 }
   

   View Slide

10. 1
    2
    3
    4 Mensagem
    5
    6 Hello World!
    7
    1 /* index.css [evite] */
    2 section#message {
    3 text-align: center;
    4 }
    1
    2
    3
    4 Mensagem
    5
    6 Hello World!
    7
    1 /* index.css */
    2 #message {
    3 text-align: center;
    4 }
    

    View Slide

11. 1
    2 ...
    3
    4 Campo obrigatório
    5
    6 ...
    7
    8 Email inválido
    9
    10 ...
    1 /* index.css */
    2 #message {
    3 text-align: center;
    4 }
    1
    2 ...
    3
    4 Campo obrigatório
    5
    6 ...
    7
    8 Email inválido
    9
    10 ...
    1 /* index.css */
    2 .message {
    3 color: red;
    4 }
    … e seletores de classe.
    

    View Slide

12. 1
    2 ...
    3
    4 ...
    5
    6
    7 Notícias
    8
    9
    10
    11 Lorem ipsum
    12
    13 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    14
    15 Paulo Barbosa
    16
    17
    18
    19 ...
    20
    21 ...
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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?”
    …
    

    View Slide

16. Existem vários!
    OOCSS

    BEM

    SMACSS

    SUIT CSS

    …
    http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/
    

    View Slide

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
    

    View Slide

18. OOCSS
    1
    2 Abrir
    3 Tableless
    4
    5
    6
    7
    

    View Slide

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

    View Slide

20. BEM
    Block, Element, Modifier
    .block[__element_modifier] { /* … */ }
    nomes compostos separados por “-“
    1
    2 ...
    3 ...
    4
    1 .report-graph { /* ... */ }
    2 .report-graph__bar { /* ... */ }
    3 .report-graph__bar.report-graph__bar_visible { /* ... */ }
    4 .report-graph__bar.report-graph__bar_size_big { /* ... */ }
    

    View Slide

21. Mas o modificador não era
    pra ser “--" ?
    “--" é erroneamente atribuído ao BEM
    https://en.bem.info/method/naming-convention/
    

    View Slide

22. E se unirmos pontos
    fortes de cada um?
    Base do OOCSS + Variação do BEM + States do SMACSS
    

    View Slide

23. View Slide

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.”
    

    View Slide

25. O que vamos abordar aqui
    são as convenções de
    nomenclatura do SUIT CSS!
    

    View Slide

26. View Slide

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
    

    View Slide

28. Utilities
    Classes com propriedades de posição e estrutura
    Aplicadas a qualquer elemento de um componente
    u-[sm-|md-|lg-]
    

    View Slide

29. u-[sm-|md-|lg-]
    1
    2
    3
    4
    5
    6
    7 …
    8
    9
    

    View Slide

30. Responsive Utilities
    u-[sm-|md-|lg-]
    Cadê o “xs-“ aí?
    

    View Slide

31. Components
    Uma excelente forma de saber quem é quem!
    [-][--modifierName|-descendentName]
    

    View Slide

32. Namespace
    É opcional e usado para evitar potenciais coflitos
    1 .twt-Button { /* ... */ }
    2 .twt-Tabs { /* ... */ }
    [-][--modifierName|-descendentName]
    

    View Slide

33. ComponentName
    Deve ser escrito em UpperCamelCase - :’(
    1
    2 ...
    3
    1 .MyComponent { /* ... */ }
    [-][--modifierName|-descendentName]
    

    View Slide

34. Modifiers
    Componente modificador é uma classe que altera a
    apresentação de um componente base de alguma
    forma
    1 ...
    1 /* Core button */
    2 .Button { /* ... */ }
    3 /* Default button style */
    4 .Button--default { /* ... */ }
    5 /* Made in BRZ :) */
    6 .Button.Button--default { /* ... */ }
    [-][--modifierName|-descendentName]
    

    View Slide

35. Descendente
    Classe ligada a um nó que é descendente de um componente
    1
    2
    3
    4 ...
    5
    6
    7 ...
    8
    9
    1 /* Core Component */
    2 .Tweet { /* ... */ }
    3 /* Descendents */
    4 .Tweet-header { /* ... */ }
    5 .Tweet-avatar { /* ... */ }
    6 .Tweet-bodyText { /* ... */ }
    [-][--modifierName|-descendentName]
    

    View Slide

36. .is-stateOfComp
    Lembra do state do SMACSS?
    “.is-stateName” deve ser usado em conjunto
    1
    2 ...
    3
    1 .Tweet { /* ... */ }
    2 .Tweet.is-expanded { /* ... */ }
    

    View Slide

37. View Slide

38. Na prática
    github.com/jpaulobneto/suit-up
    

    View Slide

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

    View Slide