$30 off During Our Annual Pro Sale. View Details »

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

    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