Embed Size (px)
Citation preview
SUIT CSSCOMO PADRÃO DE ESCRITA DE ESTILOS
João Paulo BarbosaCo-founder and Developer @ BRZ DIGITAL
!
brzdigital.com.brmedium.com/@jpaulobneto
github.com/jpaulobnetotwitter.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 <!-- 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
!
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 }
!
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 }
!
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.
%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 ...
%
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
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!
OOCSSBEM
SMACSSSUIT CSS
…
http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-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 <!-- 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">
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, 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 { /* ... */ }
Mas o modificador 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 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
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 <!-- 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>
Responsive Utilities
u-[sm-|md-|lg-]<utilityName>
Cadê o “xs-“ aí?
Components
Uma excelente forma de saber quem é quem!
[<namespace>-]<ComponentName>[--modifierName|-descendentName]
Namespace
É opcional e usado para evitar potenciais coflitos
1 .twt-Button { /* ... */ } 2 .twt-Tabs { /* ... */ }
[<namespace>-]<ComponentName>[--modifierName|-descendentName]
ComponentName
Deve ser escrito em UpperCamelCase - :’(
1 <article class="MyComponent"> 2 ... 3 </article>
1 .MyComponent { /* ... */ }
[<namespace>-]<ComponentName>[--modifierName|-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>[--modifierName|-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 { /* ... */ }
