Metodologias CSS

Sou Front End Developer e graduando de Sistema de Informação na Universidade Unigranrio e Organizer do GDG Duque de Caxias, além de ser apaixonado por tecnologias web.

Twitter/Github: @lucasktrindade

Por que as pessoas não se dão bem com o CSS?

Um pouco de história...

A criação do CSS tinha como objetivo criar uma maneira mais fácil de formatar informações, eis que em 94 iniciou a criação das famosas Folhas de Estilo em Cascata por Håkon Wium Lie.
Já em 96 foi lançada a primeira recomendação oficial pelo W3C, considerado então o CSS nível 1.

Alguns benefícios do CSS

A partir de um documento é possível controlar vários documentos HTML.
Facilidade na criação de layouts, códigos simples.
Linguagem de rápido aprendizado.

Alguns malefícios do CSS

Escopo Global.
A falta de padrões torna difícil para manter um projeto.
Involuntária adoção a más práticas.

O que fazer para melhorar?

Seletores CSS
OOCSS
SMACSS
BEM
ITCSS

Seletores CSS

Especificidade CSS

Estilos inline;
IDs;
Classes, pseudoclasses e atributos;
Elementos e pseudoelemento;

Especificidade CSS

Performance de Seletores

ID
Classe
Elemento
Irmão adjacente( p + a )
Filho( div > p )
Descendente(nav a)
Universal( * )
Atributo( type="text" )
Pseudoclasse/Pseudoelemento( a:hover )

Seletor-chave

É a parte mais a direita de um seletor CSS.

#conteudo .devfestbh{}

O navegador vai buscar todas as instâncias do elemento .devfestbh e após isso subir até encontrar o #conteudo.

#conteudo *{}

O seletor acima seria mais custoso pois ele varreria todos os elementos da página até encontrar o descendente do #conteudo.

Não use seletores superqualificados

html body .wrapper #conteudo a{}

O navegador vai olhar para todos os elementos da direita para esquerda. Você pode transformar isso, nisso aqui:

#conteudo a{}

Object Oriented CSS

Traz conceitos da orientação a objetos das linguagens back end, com a ideia de evitar repetição de código, facilitar a expansão e manutenção do código. Criado por Nicole Sullivan.

Object Oriented CSS

Problemas que o OOCSS visa solucionar:

A dificuldade de manter projetos grandes;
O tamanho do arquivo é cada vez maior conforme o projeto evolui;
Reúso de código quase inexistente;
Código frágil(até para um expert é difícil mexer).

Object Oriented CSS

Soluções propostas:

Modular: combinável, reusável e extensível;
Leve: relacionamento 1:N entre CSS e potenciais layouts;
Rápido: poucas requisições HTTP e tamanhos mínimos de arquivos;
Pronto para o futuro: manutenível, semântico e padronizado;
Simplificado e acessível.

Object Oriented CSS

Princípios:

Separar estrutura e skin;
Separar contêiner e conteúdo;

Performance:

Intenso reúso de código;
Menos repaints e reflows.

Beleza, e como é composto um "objeto"?

HTML, que pode ser 1 ou mais nós do DOM;
Declarações CSS;
Componentes como imagens de background e sprites, por exemplo;
Comportamentos Javascript, listeners e eventos associados.

Exemplos e tutoriais: http://oocss.org

SMACSS

Scalable and Modular Architecture for CSS

É um guia de padrões, criado por Jonathan Snook, que pode ser utilizado para ser utilizado em projetos ou apenas para absorver partes que mais te interessam.

Organização do código CSS:

Base
Layout
Módulo
Estado
Tema

Base

Contém os estilos aplicados aos elementos, serve para determinar a aparência padrão de todos os elementos, sem a utilização de classes ou IDs. Seria o css reset da sua página. Pode ser usado o normalize.css no base.

Base



body {
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Layout

Pode conter um ou mais módulos, seria o footer,header, article da sua página e dentro desse layout possui módulos, basicamente a estilização usada no layout é o posicionamento na tela. Para nomenclatura é utilizado l- (ou layout-).

Layout

#article{
    float:left;
    width: 80%;
}

#sidebar{
    float: right;
    width: 20%;
}

.l-fixed #article{
    width: 600px;
}

.l-fixed #sidebar{
    width: 200px;
}

Módulos

Geralmente estão contidos dentro de layouts e devem ser partes reutilizáveis em qualquer outro projeto, sem ter dependências. Os módulos geralmente são widgets, botões, searchbar, tabs e etc. Não deve ser usado IDs e seletores de elementos, é aconselhado usar classes. Não usar m- ou module-.

Módulos

.button {
  display: inline-block;
  box-shadow: none;
  border: none;
  text-transform: uppercase;
  padding: 10px;
  background: #CFCFCF;
  font-size: 14px;
}

Estados

Geralmente atribui comportamentos a layouts ou módulos, serve pra incrementar ou sobrescrever estilos. Para nomenclatura foi convencionado usar (is-). Exemplos:

.is-active
.is-selected
.is-visible
.is-hidden
.is-collapsed

Tema

Serve para alterações de cores, imagens e elementos da UI, geralmente alguma alteração cosmética. Pode ser preciso alterar os estilos Base, Layout ou Estado.

BEM

Block Element Modifier

BEM vai além de um guia de normatização, é mais completo e pode ser considerado um framework pois possui temas e ferramentas úteis para iniciar o projeto. O modo BEM de estrutura um projeto se assemelha aos módulos do SMACSS e por consequência o OOCSS pois a intenção é reutilizar as estruturas em outros projetos. Criado na Yandex.

Bloco

Entidade independente com seu próprio significado; é a abstração mais geral de um componente/módulo. Os blocos podem ser usados um dentro do outro.

Nomenclatura

Deve descrever seu propósito( "O que é?" - menu ou botão), e não o estado("O que parece?" - vermelho ou grande).

<!-- Correto. O bloco de erro é semanticamente válio -->
<div class="erro"></div>

<!-- Incorreto. Descreve aparência -->
<div class="texto-vermelho"></div>

Elemento

Descendente e parte de um bloco; ajuda a formá-lo como um todo. Não pode ser usado sem estar contido em um bloco.

Nomenclatura

Deve descrever seu propósito( "O que é?" - input, button), e não o estado("O que parece?" - vermelho ou grande). O elemento é escrito com duplo underscore(__).

<!-- `search-form` block -->
<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block -->
    <button class="search-form__button">Search</button>
</form>

Modificador

Um estado ou comportamento diferente de um Bloco ou Elemento

Nomenclatura

O nome do modificador deve descrever aparência(size_s ou theme_islands, seu estado(disabled, focused, etc.) e/ou comportamento(directions_left-top).

<!-- The `search-form` block has the `focused` Boolean modifier -->
<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- The `button` element has the `disabled` Boolean modifier -->
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

Booleano

Key-value

<!-- The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <!-- The `button` element has the `size` modifier with the value `m` -->
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

Estrutura de Arquivos

A implementação dos blocos, elementos e modificadores são divididos em arquivos independentes de acordo com a tecnologia em que podemos conectar eles individualmente.

search-form/                           # Directory of the search-form

    __input/                           # Subdirectory of the search-form__input
        search-form__input.css         # CSS implementation of the
                                       # search-form__input element
        search-form__input.js          # JavaScript implementation of the
                                       # search-form__input element

    __button/                          # Subdirectory of the search-form__button
                                       # element
        search-form__button.css
        search-form__button.js

    _theme/                            # Subdirectory of the search-form_theme
                                       # modifier
        search-form_theme_islands.css  # CSS implementation of the search-form block
                                       # that has the theme modifier with the value
                                       # islands
        search-form_theme_lite.css     # CSS implementation of the search-form block
                                       # that has the theme modifier with the value
                                       # lite

    search-form.css                    # CSS implementation of the search-form block
    search-form.js                     # JavaScript implementation of the
                                       # search-form block

Exemplo BEM

ITCSS

Inverted Triangle CSS

É uma metodologia criada por Harry Roberts, que representa abstratamente uma arquitetura CSS baseada em triângulo invertido. Quanto mais na base, mais específico as regras.

Benefícios da utilização do ITCSS:

Acessível a qualquer um pela simplicidade;
Organiza e gerencia o código em cascata;
É possível encontrar o código de maneira mais rápida.
Reduz perdas e redundância de código.
Evita dores de cabeça com especificidade.

Camadas do Triângulo Invertido

Localização sem ITCSS

Localização com ITCSS

Configurações(settings)

São configurações globais, são variáveis globais que vão definir cores, espaçamento e etc.

$color-ui: #BADA55;
$spacing-unit: 10px;

Ferramentas(tools)

Deve conter funções e mixins relativos ao projeto, vem após as configurações pois pode ser que seja necessário uma variável global para uso.

@function strip-unit($num){
    return $num/ ($num * 0 + 1);
}

Genérico(generic)

Aqui onde geralmente se encontra os CSS resets; onde se coloca um Normalize.css e etc. Neste ponto o CSS efetivamente será compilado.

*{
    -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;    
            box-sizing:border-box;
}

Base ou Elementos

Aqui consta a estilização dos elementos HTML. Define basicamente os estilos básicos de um elemento, sem nenhuma classe ou ID.

video{
    height:auto;
    max-width: 100%;
}

Objetos(Objects)

Comporta estilos não cosméticos/abstratos, remetendo mais a OOCSS, grids, contêineres e outros desta natureza.

.base-list {
    margin: 0;
    padding: 0;
    list-style: none;

    > .item {
        padding: $spacing-unit;
    }
}

Componentes(components)

Comporta o maior número de estilizações, já que nela devem constar códigos os elementos de UI do projeto(menus, carousels, slider e etc). Fazendo um paralelo com módulos do SMACSS.

.products-list {
    @extend font-brand();
    border-top: 1px solid $color-ui;

    > .item {
        border-bottom: 1px solid $color-ui;
    }
}

Trumps

Esta camada contém utilitários, helpers, sobrescritas e hacks e, devido ao propósito pelo qual existe, não se acanhe em usar !important se necessário.

.half-with{
    width: 50% !important;
}

Organização do Código

É feita por explicitude e especificidade, a hierarquia, a cascata e a especificidade CSS trabalham a favor do desenvolvedor. Recomenda-se que, na prática, cada camada seja formada por uma série de partials(Sass) com a seguinte convenção de nome: _<camada>.<partial>.scss.

Exemplos:

_settings.colors.scss
_elements.headings.scss
_components.tabs.scss

Dicas

Referências

CSS Eficiente, Casa do Código. http://bit.ly/2fxFPua
Arquitetura CSS. http://bit.ly/2fjZZmv
Get BEM. http://bit.ly/1MH10hi
Object Oriented CSS. http://bit.ly/2fxEl3f
Arquitetura CSS usando SMACSS. http://bit.ly/2fk0Rre
Arquitetura usando BEM. http://bit.ly/2fdRgWH
BEM Documentation. http://bit.ly/2fh4Cj9
A new Front-End Methodology: BEM. http://bit.ly/2eX4Vkz
CSS Guideline. http://bit.ly/1lfdUwn
Pontuação de especificidade da CSS. http://bit.ly/2fxECmD
Efeito cascata, herança e especificidade do CSS. http://bit.ly/2fdP0Pj
Organizando seu CSS com ITCSS.
Managing CSS Projects with ITCSS.

Metodologias CSS

Por que as pessoas não se dão bem com o CSS?

Um pouco de história...

Alguns benefícios do CSS

Alguns malefícios do CSS

O que fazer para melhorar?

Seletores CSS

OOCSS

SMACSS

BEM

ITCSS

Seletores CSS

Especificidade CSS

Especificidade CSS

Performance de Seletores

Seletor-chave

Não use seletores superqualificados

Object Oriented CSS

Object Oriented CSS

Object Oriented CSS

Object Oriented CSS

Object Oriented CSS

Beleza, e como é composto um "objeto"?

SMACSS

Scalable and Modular Architecture for CSS

Organização do código CSS:

Base

Base

Layout

Layout

Módulos

Módulos

Estados

Tema

BEM

Block Element Modifier

Bloco

Nomenclatura

Elemento

Nomenclatura

Modificador

Nomenclatura

Booleano

Key-value

Estrutura de Arquivos

Exemplo BEM

Exemplo BEM

ITCSS

Inverted Triangle CSS

Benefícios da utilização do ITCSS:

Camadas do Triângulo Invertido

Localização sem ITCSS

Localização com ITCSS

Configurações(settings)

Ferramentas(tools)

Genérico(generic)

Base ou Elementos

Objetos(Objects)

Componentes(components)

Trumps

Organização do Código

Dicas

Referências

Obrigado!

Metodologias CSS

More from Lucas Trindade