OOCSS Revised - Suissa version

Bom tivemos uma ótima discussão hoje no grupo Frontend Brasil com esse post sobre o uso de marcação de grid no HTML, como no exemplo que dei no post usando as classes do Bootstrap:

<div class="col-ms-6 col-md-4"></div>  

E isso acabou chegando no OOCSS, porém antes de revisar ele vamos ver o por que não devemos usar esse tipo de marcação.

Semântica

Semântica (do grego σημαντικός, sēmantiká, plural neutro de sēmantikós, derivado de sema, sinal), é o estudo do significado. Incide sobre a relação entre significantes, tais como palavras, frases, sinais e símbolos, e o que eles representam, a sua denotação.

A semântica linguística estuda o significado usado por seres humanos para se expressar através da linguagem. Outras formas de semântica incluem a semântica nas linguagens de programação, lógica formal, e semiótica.

http://pt.wikipedia.org/wiki/Sem%C3%A2ntica

Tá e dai?

Agora olhe essa imagem que está no artigo da Wikipedia.

Você percebeu que os nomes são reconhecidos por todos?

  • vértebra
  • gato
  • animal
  • peixe
  • água
  • baleia
  • mamífero
  • urso
  • pêlo

Agora perceba que há uma relação entre eles.

Então vamos ao nosso exemplo do início.

<div class="col-ms-6 col-md-4"></div>  

`

Caso você nunca tivesse usado o Bootstrap na vida você conseguiria entender o que isso significa?

Vamos tentar melhorar isso?

<div class="column-ms-6 column-md-4"></div>  

Bah mas não mudou porra nenhuma meuuuu!

Calma meu caro leitor, o que mais me incomoda no que sobrou é o mse md que não dizem nada e fere o conceito de Object Calesthenics: Don’t abbreviate.

Então vamos entender o que são essas abreviações:

Mixed: mobile and desktop The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

http://getbootstrap.com/examples/grid/

  • xs (phones)
  • sm (tablets)
  • md (desktops)
  • lg (larger desktops

Então nosso código poderia ficar:

<div class="column-phones-12 column-desktops-6"></div>  

Como não achei o ms lá colocarei o xs aqui.

Até agora ta sussegado, nada de estranho.

Certo vamos imaginar que isso seria um container de um form:

<div class="column-phones-12 column-desktops-6">  
    <form class='form-create-user'>
    </form>
</div>  

Vou te relembrar de uma coisa:

Semântica (do grego σημαντικός, sēmantiká, plural neutro de sēmantikós, derivado de sema, sinal), é o estudo do significado. Incide sobre a relação entre significantes, tais como palavras, frases, sinais e símbolos, e o que eles representam, a sua denotação.

Você consegue enxergar alguma relação entre form-create-user e column-phones-12 column-desktops-6. Se você conseguiu olha...

Tá bom então seu sabichão como é que você vai relacionar esses 2 elementos? Vai quero ver agora rapaz!

Calma meu filho, estamos chegando lá.

Se você tem um elemento que agregue outros, como uma molécula no Atomic Design, você poderia muito bem pensar que ele é um container ou box ou wrapper a escolha é sua.

Vamos usar a box nesse exemplo:

<div class="form-create-user-box">  
    <form class='form-create-user'>
    </form>
</div>  

Uai mas onde foram parar aquelas classes?

Agora chegamos no ponto principal desse artigo!!!

Eiiii não vai perder o foco com a foto acima!

A mágica irá acontecer no nosso querido e amado pré-processador de CSS e para isso temos 3 sabores: LESS, SASS e Stylus.

Eu não vou entrar em detalhe em nenhum pois os 3 possuem a mesma funcionalidade necessária para isso, extend, agora vou parar de te enrolar e mostrar como fazer essa classe
form-create-user-box nas que precisamos: column-phones-12 column-desktops-6.

Para agregarmos duas ou mais classes pré definidas no nosso css(leia no seu pré-processador favorito).

.column-phones-12 
.column-desktops-6 


.form-create-user-box {
    @extend .column-phones-12;
    @extend .column-desktops-6;
    border: 1px solid #ccc;
}

Sim é só fazer isso uai, não ficou mais legível nosso código? Bom eu achei :p

Com isso nós abstraímos as classes específicas com uma só.

Abstração é a habilidade de concentrar nos aspectos essenciais de um contexto qualquer, ignorando características menos importantes ou acidentais. Em modelagem orientada a objetos, uma classe é uma abstração de entidades existentes no domínio do sistema de software

Nesse caso nossa classe é form-create-user-box e suas entidades existentes são: column-phones-12, column-desktops-6.

E para abstrair nossa entidade utilizamos de herança das outras 2 classes, ou seja, form-create-user-box herda os atributos de column-phones-12 e de column-desktops-6, também conhecida como herança múltipla.

Herança (ou generalização) é o mecanismo pelo qual uma classe (sub-classe) pode estender outra classe (super-classe), aproveitando seus comportamentos (métodos) e variáveis possíveis (atributos). Um exemplo de herança: Mamífero é super-classe de Humano. Ou seja, um Humano é um mamífero. Há herança múltipla quando uma sub-classe possui mais de uma super-classe. Essa relação é normalmente chamada de relação "é um"

Vamos usar um outro exemplo agora e para a próxima explicação da MINHA ideia de OOCSS, analisaremos o código do medium.com

<ul class="siteNavList">  
  <li class="siteNavList-item navigable-list-item siteNavList-item--home">
      <a class="siteNavList-button" title="Go home" href="/" tabindex="-1" >
          <span class="icon icon--logoM">
          </span> Home
      </a>
      <a class="siteNavList-button--secondary" title="Search Medium" href="/search" tabindex="-1">
          <span class="icon icon--search">
              <span class="u-screenReaderText">
                  search
              </span>
          </span>
      </a>
  </li>
  ...

faz parte do topo

Vamos analisar essa redação:

siteNavList-item navigable-list-item siteNavList-item--home  

Perceba essas palavras-chave em cada classe: item, list.

Então temos certeza que ele é um item de uma lista, podemos perceber que ele usa uma sintaxe parecida com a do BEM, mas não é se não o item seria escrito diferentemente, assim: __item. Pois ele é um elemento do bloco, levando em consideração a documentação:

.b-block__elem1__elem2

Vamos parar de viajar e voltar no nosso foco, criar uma classe semantica para esse item da lista. Vamos pensar em uma classe mais genérica para essa lista já que ela esta no topo, dentro do ul.siteNavList.

Podemos manter esse mesmo nome para nossa lista, porém para aquele item em vez de usarmos as 3 classes, encapsularemos ela em uma só que represente aquele elemento e seus clones.

Mas por que fazer isso?

Ai chegamos no OOCSS, porém, ...

Ahhhhhh SABIA! Sempre tem um porém neh?!

Porém eu não concordo muito com a metodologia se comparando a Orientação a Objetos do Backend com o OOCSS o que temos?

Na programação orientada a objetos, implementa-se um conjunto de classes que definem os objetos presentes no sistema de software. Cada classe determina o comportamento (definido nos métodos) e estados possíveis (atributos) de seus objetos, assim como o relacionamento com outros objetos.

E uma parte que eu acabei de falar ali em cima:

Encapsulamento consiste na separação de aspectos internos e externos de um objeto. Este mecanismo é utilizado amplamente para impedir o acesso direto ao estado de um objeto (seus atributos), disponibilizando externamente apenas os métodos que alteram estes estados. Exemplo: você não precisa conhecer os detalhes dos circuitos de um telefone para utilizá-lo. A carcaça do telefone encapsula esses detalhes, provendo a você uma interface mais amigável (os botões, o monofone e os sinais de tom)

Ou seja seu HTML não precisa conhecer cada regra do seu css, apenas usar o mínimo possível de trabalho, já que para MIM o HTML só deve ser responsável pela marcação de conteúdo, como um XML da vida.

Então vamos encapsular essas classes na classe:

.list-item

Mas hein como assim?

Uai não falei que era um item de uma lista? Não era lógico que seria isso? LOL

Eeeeeee burrroooo!! E o HOME onde vc enfiou?

Enfiei no SEU css que vou escrever agora :p

.siteNavList-item--home {
    @extend siteNavList-item; 
}

.list-item {
    @extend navigable-list-item; 
    @extend siteNavList-item--home;
}

Percebeu que .siteNavList-item--home herda os atributos da .siteNavList-item? Isso é meio lógico não?

Vamos ver como nosso HTML inicial vai ficar aplicando essas classes:

<ul class="siteNavList">  
  <li class="list-item">
      <a class="siteNavList-button" title="Go home" href="/" tabindex="-1" >
          <span class="icon icon--logoM">
          </span> Home
      </a>
      <a class="siteNavList-button--secondary" title="Search Medium" href="/search" tabindex="-1">
          <span class="icon icon--search">
              <span class="u-screenReaderText">
                  search
              </span>
          </span>
      </a>
  </li>
  ...

Como a list-item é genérica assim como um átomo no Atomic Design, a melhor forma de você modificar alguma regra específica para o list-item do siteNavList podemos apenas usar especificidade do CSS para não precisar modificar diretamente meu list-item e poder reusá-lo em qualquer outra lista do meu sistema.

.siteNavList-item--home {
    @extend siteNavList-item; 
}

.list-item {
    @extend navigable-list-item; 
    @extend siteNavList-item--home;
}
.siteNavList .list-item {
    color: blue;
}

As vezes eu sou chato batendo nessa tecla de querer marcar o mínimo possível de CSS no meu HTML, criando uma entidade que represente aquele elemento.

E também tento levar uma regra comigo de usar no máximo 2 classes por elemento.

Sim é possível meu caro leitor, utilizando essa técnica de encapsulamento para a classe representativa da entidade e outra classe para o estado do elemento.

Como eu gosto de trabalhar com os eventos acho interessante pois podemos criar elementos reativos.

Nesse caso eles seriam reativos visualmente, um exemplo bem simples é claro:

.state-validate-success {
    border-color: green;
}
.state-validate-error {
    border-color: red;
}

Essas seriam as classes setadas por um evento do Controller(JS) que servem de modificador do elemento, como no CSS não temos funções ainda podemos pensar nessas classes de estado como nossos métodos da classe pois eles são os únicos responsáveis por modificar visualmente um elemento, sem contar as media queries.

Bom essa é a minha ideia de OOCSS caso você tenha a sua por favor faz um post. Esse debate é ótimo pois podemos ter outras interpretações para as metodologias que aprendemos, levando em conta o que já conhecemos adaptamos ela para o nosso workflow.

Beijinho, beijinho. Tchau, tchau.

Para ler:

Comentários

comments powered by Disqus