Componentes CSS: como desenvolver pensando em reuso (v1.5)

COMPONENTES CSS fernahh.com.br Como desenvolver pensando em reuso.

@fernahh fernahh.com.br

contaazul.com

#!/bin/bash STRING="Hello World" echo $STRING

import javax.swing.JFrame; import javax.swing.JLabel; public class HelloWorldSwing { public static
void main(String[] args) { JFrame frame = new JFrame("HelloWorldSwing"); final JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); frame. setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); } }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <h1>Hello
World!</h1> </body> </html>

As principais empresas de software do mundo, hoje, tem seus
principais produtos na web.

O Bootstrap é o mais bem sucedido framework de CSS.
Inúmeras aplicações web são baseadas nele. Se você é front-end developer, lide com isso.

Alguns problemas sérios com CSS...

1 Qualquer seletor é global.

Até o w3fools, digo, w3schools, sabe que variáveis globais são
ruins. http://www.w3fools.com/

body header main footer h1 a article p img p
Quando pensamos no DOM, a primeira representação que nos vem a cabeça é de uma árvore.

body header main footer h1 a article p img p
Todos os seletores de uma página fazem parte do mesmo escopo global.

Enviar /* .Button */

ITEM A ITEM B ITEM C /* .Dropdown */

ITEM A ITEM B ITEM C Enviar

ITEM A ITEM B ITEM C ENVIAR

ITEM A ITEM B ITEM C Enviar /* .Dropdown .Button
*/

ITEM A ITEM B ITEM C Enviar /* .nav .Dropdown
.Button */

ITEM A ITEM B ITEM C Enviar /* .Header .Nav
.Dropdown .Button */

ITEM A ITEM B ITEM C Enviar /* body div
.TuaTia > #Container. Header .Nav .Dropdown .Button */

.TuaTia > .TuaMae > #Container.Header .Nav .Dropdown . Button */

.TuaTia > .TuaMae > . TuaPai #Container.Header .Nav . Dropdown .Button */

ITEM A ITEM B ITEM C Enviar /* .Dropdown__Button */

/* .Dropdown */ ITEM A ITEM B ITEM C Enviar
/* .Dropdown__Button */ /* .Button */

/* .Dropdown */ ITEM A ITEM B ITEM C Enviar
/* .Dropdown__Button */ /* .Button */ GLOBAL

BUG 4.096

BUG 4.096 Internet Explorer 9 e inferiores aceitam somente 4.096
seletores.

5498 seletores http://cssstats.com

5498 seletores 2371 seletores http://cssstats.com

5498 seletores 2371 seletores 9632 seletores http://cssstats.com

2 É difícil (quase impossível) refatorar.

Crescimento do tamanho das folhas de estilo nos últimos 4
anos: 10 35 80 2010 2013 2015 http://httparchive.org/

table.foo { color: red; } table.foo td.bar { color: red;
} li.foobar { color: red; font-weight: bold; font-size: 10px; }

.foo { color: red; } .bar { color: red; }
.foobar { color: red; }

É sempre mais “fácil” jogar tudo no lixo e fazer
de novo ou sobrescrever regras através da especificidade.

3 É custoso lidar com estados.

https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/

Antes de aplicar qualquer metodologia de escrita ou usar outra
tecnologia, primeiro precisamos entender princípios básicos de CSS.

PRINCÍPIOS BÁSICOS DE CSS

PRINCÍPIOS BÁSICOS DE CSS Especificidade

PRINCÍPIOS BÁSICOS DE CSS Especificidade Efeito Cascata

PRINCÍPIOS BÁSICOS DE CSS Especificidade Efeito Cascata Herança

A ESPECIFICIDADE CSS

A ESPECIFICIDADE CSS 2 3 1

A ESPECIFICIDADE CSS 2 3 1 !IMPORTANT

A ESPECIFICIDADE Especificidade de seletores - CSS inline: 1000 pontos;
- ID: 100 pontos; - Classes, pseudo-elementos e atributos: 10 pontos; - Elementos: 1 ponto.

Sempre que você usa !important, você quebra a especificidade.

EFEITO CASCATA Técnica utilizada para definir o estilo a um
seletor mesmo em caso de conflitos. O coração do CSS

EFEITO CASCATA Definindo o peso de uma regra - Importância;
- Origem; - Especificidade; - Ordem da declaração.

HERANÇA Herença? OO? Assim como você herda métodos e atributos
de objetos, no CSS você herda as regras de um elemento pai.

/* * Todo o conteúdo textual do documento * terá
16px de tamanho, pois herdam do * `body`. */ body { font-size: 16px; }

HERANÇA height, width, margin, padding Propriedades que se referem ao
box-model não aceitam herança, porém podemos forçar com o valor inherit.

Super poderes para o CSS Pré-processadores deram super poderes para
desenvolvedores escreverem CSS. Em nosso contexto, @extend e mixins nos trazem benefícios, mas que devem ser usados com bastante cautela.

@extend Permite estender placeholders e classes, porém, muitos autores desencorajam
a usar esse recurso.

.error { color: red; } .icon--error { @extend .error; }

.error { color: red; } .icon--error { @extend .error; }
/* * Resultado gerado pelo Sass. */ .error, .icon--error { color: red; }

.other__context .error { color: darken(red, 10%); }

.other__context .error { color: darken(red, 10%); } /* * Resultado
gerado pelo Sass. */ .other__context .error, .other__context .icon--error { color: #cc0000; }

Isso é péssimo! Além de tirar o controle do desenvolvedor,
o Sass irá gerar código desnecessário e prejudicar outras áreas de uma interface.

“Não concordei com o que você falou sobre @extend, você
pode usar ele com %placeholder.” @diogomoretti_

diogomoretti.github.io/grider

.error, %error { color: red; } .icon--error { @extend %error;
} .other__context .error { color: darken(red, 10%); }

/* * Resultado gerado pelo Sass. */ .error, .icon--error {
color: red; } .other__context .error { color: #cc0000; }

Resumindo sobre @extend Nunca use @extend com classes. Se você
quiser usar, vá de placeholders.

Mixins Mixins são eficientes pois eles injetam códigos somente onde
eles foram usados, além de serem muito úteis quando precisamos de parâmetros.

@mixin error { color: red; } .icon--error { @include error;
} .label--error { @include error; }

/* * Resultado gerado pelo Sass. */ .icon--error { color:
red; } .icon--error { color: red; }

@mixin error($critical: false) { @if $critical { color: darken(red, 10%);
} @else { color: red; } } .icon--error { @include error; } .icon--critical_error { @include error($critical: true); }

/* * Resultado gerado pelo Sass. */ .icon--error { color:
red; } .icon--critical_error { color: #cc0000; }

Concatenação de classes O uso de composição/concatenação de classes é
muito usado em frameworks de CSS. O popular Bootstrap faz bastante uso dessa abordagem.

.button { display: inline-block; padding: 10px; color: black; background-color: white;
} .button--sucess { color: white; background-color: green; }

Revisando: Problemas comuns com CSS

Revisando: Problemas comuns com CSS Especificidade

Revisando: Problemas comuns com CSS Especificidade Efeito Cascata

Revisando: Problemas comuns com CSS Especificidade Efeito Cascata Herança

A melhor forma de resolver problemas com CSS é dividir
para conquistar, ou seja: Criar componentes!

Componentes devem ser auto-suficientes, capazes de encapsular funcionalidades, permitir uma
API de acesso. Componente

API de acesso. Componente RequiredInterface

API de acesso. Componente ProvidedInterface ProvidedInterface RequiredInterface

Componentes JS X Componentes CSS Lembre-se: o conceito de componentes
CSS é diferente dos componentes JavaSscript.

React é uma das melhores (quiça a melhor) bibliotecas que
lidam com estado de componentes.

VirtualDOM Trata-se de uma árvore JavaScript composta por componentes e
elementos React.

VirtualDOM

VirtualDOM this.setState();

VirtualDOM

React Components > Inline Styles Inline Styles é uma forma
de especificar estilos para um componente através de um objeto, onde a chave é a representação de uma regra em camelCase e seu valor é o valor do estilo.

var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl
+ ')', WebkitTransition: 'all', msTransition: 'all' };

var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl
+ ')', WebkitTransition: 'all', msTransition: 'all' }; ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

Inline Styles good parts - É uma forma de isolar
regras (no global scope); - Mais facilidade pra lidar com estados; - Faz todo sentido quando lidamos com visualização de dados.

- Não é cacheável; - Depende 100% de JavaScript; -
Difícil de ter controle em relação a cascata e herança. Inline Styles bad parts

CSS Modules nada mais é que um arquivo de CSS
com escopo local. https://github.com/css-modules/css-modules

.normal { ... } .disable { ... } .error {
... } .success { ... } components/button.css

import styles from './components/button.css'; buttonElem.outerHTML = `<button class=$(styles.normal>Enviar</button>`; components/button.js

<button class="components_button__normal__abc5436"> Enviar </button> Output:

/* Vanilla CSS*/ innerHTML = `<button class="Button Button--inprogress">` /*
CSS Modules */ innerHTML = `<button class="${styles.inProgress}" >` CSS Modules > Estados

CSS Modules > Composição .button { ... } .normal {
composes: button; } .disable { composes: button; } .error { composes: button; } .success { composes: button; }

CSS Modules > Dependências /* colors.css */ .errorColor { color:
red; } /* button.css */ .button { ... } .error { composes: button; composes: errorColor from "/componentes/colors.css"; }

“Se você pudesse resumir CSS Modules em uma frase, qual
seria?”

1º GET /index.html CSS Modules > Dependências > HTTP2 Server
Push

1º GET /index.html index.html CSS Modules > Dependências > HTTP2
Server Push

1º GET /index.html colors.css button.css index.html CSS Modules > Dependências
> HTTP2 Server Push

CSS Modules good parts - É possível lidar com escopo
local; - Fácil de lidar com estados; - Possui uma API de importação e exportação de regras; - Possui integração com Módulos JavaScript <3.

- Depende de tarefas de build; CSS Modules bad parts
- É uma tecnologia nova e com futuro incerto.

Um dica: use mais recursos nativos do browser do que
soluções baseadas em JavaScript.

Vanilla Components CSS > BEM

<button class="button button__anchor_icon">Abrir</button>

<button class="button button__anchor_icon">Abrir</button> bloco

<button class="button button__anchor_icon">Abrir</button> bloco elemento

<button class="button button--state-danger">Fechar</button> bloco

<button class="button button--state-danger">Fechar</button> bloco modificador

Vanilla Components CSS > SMACSS

Vanilla Components CSS > SMACSS Foi criado para resolver os
problemas do Yahoo Mail. É dividido em base, layout, module, state. Não é apenas um sistema de escrita, é uma metodologia.

<section class="comment-box"> <div class="comment-box is-open">...</div> <button class="button-black">Comentar</button> </section> módulo

<section class="comment-box"> <div class="comment-box is-open">...</div> <button class="button-black">Comentar</button> </section> módulo módulo
com estado

<section class="comment-box"> <div class="comment-box is-open">...</div> <button class="button-black">Comentar</button> </section> módulo módulo
com estado tema

Vanilla CSS good parts - A curva de aprendizado é
fácil; - Dependência zero de outas ferramentas; - Já usado e validado por grandes produtos.

- Não resolve o problema com escopo global de seletores.
- É custoso de manter e fácil de ser violado; Vanilla CSS bad parts

OH: se pós-processarmos nosso CSS, podemos usar features do futuro!

PostCSS

http://caniuse.com/#feat=css-variables

:root { --main-color: #ffffff; } @media (min-width: 30em) { :root
{ --main-color: #333333; } } body { background-color: #000000; color: var(--main-color); } .Button { color: $main-color; border: 4px solid var(--main-color); ... }

:root { --main-color: #ffffff; } @media (min-width: 30em) { :root
{ --main-color: #333333; } } body { background-color: #000000; color: var(--main-color); } .Button { color: $main-color; border: 4px solid var(--main-color); ... } body { background-color: #000000; color: #ffffff; } @media (min-width: 30em) { body { color: #333333; } } .Button { color: #ffffff; border: 4px solid #ffffff; ... } @media (min-width: 30em) { .Button { color: #333333; border: 4px solid #333333; } }

CSS Variables >>>> abismo >>>> Variáveis do Sass

:root { --clearfix: { display: table; clear: both; content: '';
} }

:root { --clearfix: { display: table; clear: both; content: '';
} } div { @apply --clearfix; }

@apply A projeto ainda é um rascunho de proposta, porém,
já está implementado no Google Chrome. https://tabatkins.github.io/specs/css-apply-rule/

- Escolha a melhor abordagem para o seu produto; Conclusões

- Escolha a melhor abordagem para o seu produto; -
Aprenda bem Vanilla CSS; Conclusões

- Escolha a melhor abordagem para o seu produto; -
Aprenda bem Vanilla CSS; - Fique de olho na comunidade React; Conclusões

Lembre-se: antes de adotar uma nova tecnologia em um produto,
pense como será o futuro de sua aplicação quando essa tecnologia for defasada.

Sempre ouça o que a comunidade tem pra oferecer, afinal,
somos nós que fazemos o futuro da web.

Obrigado! @fernahh

Componentes CSS: como desenvolver pensando em reuso (v1.5)

Componentes CSS: como desenvolver pensando em reuso (v1.5)

More Decks by fernahh

Other Decks in Programming

Featured

Transcript