SUIT CSS como padrão de escrita de estilos

SUIT CSS COMO PADRÃO DE ESCRITA DE ESTILOS

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

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

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

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

…brincadeira!

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

Seletores de tags provavelmente foram os primeiros que usamos 1
 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

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

1  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  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 }

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

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

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íﬁco = diﬁculdade de reuso

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

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

Existem vários! OOCSS  BEM  SMACSS  SUIT CSS  … http://tableless.com.br/oocss-smacss-bem-dry-css-aﬁnal-como-escrever-css/

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

OOCSS 1  2 <button class="button anchor-icon">Abrir</button> 3
<a class="link anchor-icon">Tableless</a> 4  5 <div class="graph graph-big"> 6  7 <div class="graph graph-big clearfix wrapper">

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

BEM Block, Element, Modiﬁer .block[__element_modiﬁer] { /* … */ }
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 { /* ... */ }

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

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

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

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

SUIT CSS naming conventions Nomes de classes estruturadas Hífens signiﬁcativos
(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

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

u-[sm-|md-|lg-]<utilityName> 1  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>

Responsive Utilities u-[sm-|md-|lg-]<utilityName> Cadê o “xs-“ aí?

Components Uma excelente forma de saber quem é quem! [<namespace>-]<ComponentName>[--modiﬁerName|-descendentName]

Namespace É opcional e usado para evitar potenciais coﬂitos 1
.twt-Button { /* ... */ } 2 .twt-Tabs { /* ... */ } [<namespace>-]<ComponentName>[--modiﬁerName|-descendentName]

ComponentName Deve ser escrito em UpperCamelCase - :’( 1 <article
class="MyComponent"> 2 ... 3 </article> 1 .MyComponent { /* ... */ } [<namespace>-]<ComponentName>[--modiﬁerName|-descendentName]

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]

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>[--modiﬁerName|-descendentName]

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

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

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

SUIT CSS como padrão de escrita de estilos

SUIT CSS como padrão de escrita de estilos

Other Decks in Technology

Featured

Transcript