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?

  1. Seletores CSS

  2. OOCSS

  3. SMACSS

  4. BEM

  5. ITCSS

Seletores CSS

Especificidade CSS

  1. Estilos inline;
  2. IDs;
  3. Classes, pseudoclasses e atributos;
  4. Elementos e pseudoelemento;

Especificidade CSS

Performance de Seletores

  1. ID
  2. Classe
  3. Elemento
  4. Irmão adjacente( p + a )
  5. Filho( div > p )
  6. Descendente(nav a)
  7. Universal( * )
  8. Atributo( type="text" )
  9. 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

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 

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

Obrigado!

Twitter/Github: @lucasktrindade

Made with Slides.com