OOCSS - Object Oriented CSS

OBJECT ORIENTED CSS

Gabriel Albuquerque

ocapjack@gmail.com

NICOLE SULLIVAN

O QUE É?

Não é um frameworkNão é outra linguagem

É um paradigma

Conjuto de boas práticas para otimizar

a relação de componentes HTML com seus estilos e

consequentemente melhorar a performance do site

“Programação orientada a objetos é

um paradigma de programação que

representa conceitos como 'objetos' que

possuem campos de dados (atributos que

descrevem o objeto) e procedimentos

associados, conhecidos como métodos.”

- Wikipedia

CSS orientado a objetos é um

paradigma que representa

elementos HTML como 'objetos' que possuem estilos que podem ser

reutilizados.

OOP OOCSS

Elementos reutilizáveis

Domínio da cascata

Classes múltiplas para simular OO

Código limpo e menor

Menos páginas de estilos

Menos requisições HTTP

Escalabilidade

Desenvolvimento mais rápido

Site mais rápido

“Crie uma biblioteca de componentes” - Nicole Sullivan

Separar os elementos

• Headings

• Lists

• Module headers e footers

• Grids

• Buttons

• Qualquer coisa que seja consistente em todo o site

Misturar e combinar esses componentes para formar o site

Primeiro definir todos os componentes e depois as páginas

1 Heading

5 Media Blocks

2 Link Styles

1 Comment List

1 Action List

1 Paragraph

DEFINA VALORES DEFAULT

#weatherModule h3 {

color: red;

}

#tabs h3 {

color: blue;

}

#weatherModule h3 {

color: red;

}

#tabs h3 {

color: blue;

}

h3 {

color: black;

}

#weatherModule h3 {

color: red;

}

#tabs h3 {

color: blue;

}

EVITE ESPECIFICAR ELEMENTOS

div.error {

color: red;

}

div.error {

color: red;

}

EXCEÇÃO

Estender uma classe para funcionar em vários elementos.

Exemplo: Estender a classe error para aplicá-la nos elementos strong ou div declarando somente os valores diferentes dos valores default

.error { color: red;

}

USE A ORDEM DA CASCATA A SEU FAVOR

html body .myModule div .hd {

margin-bottom: 10px;

}

html body .myModule div .hd {

margin-bottom: 10px;

}

.myModule .hd {

margin-bottom: 10px;

}

EVITE ESPECIFICAR LOCALIZAÇÃO

.sidebar ul li a {

color: red;

}

.header ul li a {

color: blue;

}

.sidebar ul li a {

color: red;

}

.header ul li a {

color: blue;

}

.sidebar {

color: red;

}

.header {

color: blue;

}

.sidebar ul li a {

color: red;

}

.header ul li a {

color: blue;

}

.sidebar {

color: red;

}

.header {

color: blue;

}

.sidebar a {

color: red;

}

.header a {

color: blue;

}

.sidebar ul li a {

color: red;

}

.header ul li a {

color: blue;

}

.sidebar {

color: red;

}

.header {

color: blue;

}

.sidebar a {

color: red;

}

.header a {

color: blue;

}

.sidebar ul li a {

color: red;

}

.header ul li a {

color: blue;

}

.sidebar {

color: red;

}

.header {

color: blue;

}

.sidebar a {

color: red;

}

.header a {

color: blue;

}

NÃO ACESSE UM NÓ DE UM OBJETO DIRETAMENTE

.inner {

color: red;

}

.tr {

color: blue;

}

.bl {

color: black;

}

.inner {

color: red;

}

.tr {

color: blue;

}

.bl {

color: black;

}

.weatherMod .inner {

color: red;

}

.weatherMod .tr {

color: blue;

}

.weatherMod .bl {

color: black;

}

SEPARE A ESTRUTURA DO VISUAL

#button {

width: 200px;

height: 50px;

padding: 10px;

border: solid 1px #CCC;

background: linear-gradient(#CCC, #222);

box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;

}

#box {

width: 400px;

overflow: hidden;

border: solid 1px #CCC;

background: linear-gradient(#CCC, #222);

box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;

}

#button {

width: 200px;

height: 50px;

padding: 10px;

border: solid 1px #CCC;

background: linear-gradient(#CCC, #222);

box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;

}

#box {

width: 400px;

overflow: hidden;

border: solid 1px #CCC;

background: linear-gradient(#CCC, #222);

box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;

}

.button {

width: 200px;

height: 50px;

}

.box {

width: 400px;

overflow: hidden;

}

.skin {

border: solid 1px #ccc;

background: linear-gradient(#CCC, #222);

box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;

}

SEPARE O CONTAINER DO CONTEÚDO

.myObject h2 {

font-size: .8em;

line-height: 1;

color: #777;

text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;

}

.myObject h2 {

font-size: .8em;

line-height: 1;

color: #777;

text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;

}

h2 {

font-size: .7em;

line-height: 2;

color: #CCC;

}

.myObject .category {

font-size: .8em;

line-height: 1;

color: #777;

text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;

}

RESUMO

Definir valores default

Evite especificar elementos

Use a ordem da cascata a seu favor

Evite especificar localização

Não acesse sub-nó de um objeto diretamente

Separe a estrutura do visual

Separe o container do conteúdo

REFERÊNCIAS

http://www.slideshare.net/stubbornella

https://github.com/stubbornella/oocss/wiki

http://www.stubbornella.org/

http://oocss.org/

http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

http://tableless.com.br/oocss-ou-css-do-jeito-certo/#.UaTjJ6Ie2IB

http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

http://thenextweb.com/2011/03/22/writing-efficient-css-understand-your-selectors/

http://tableless.com.br/melhorando-performance-css/#.UaT1FqIe2IA