Definir valores default, evitar especificar elementos e usar a ordem da cascata a seu favor são algumas das boas práticas de CSS orientado a objetos para otimizar a relação entre componentes HTML e estilos e melhorar a performance do site.

1. OBJECT ORIENTED CSS
Gabriel Albuquerque
ocapjack@gmail.com

2. NICOLE SULLIVAN

3. O QUE É?
Não é um framework
Nã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

4. “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

5. Elementos reutilizáveis
Domínio da cascata
Classes múltiplas para simular OO

6. Código limpo e menor

7. Menos páginas de estilos
Menos requisições HTTP

8. Escalabilidade
Desenvolvimento mais rápido
Site mais rápido

9. “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

10. 1 Heading
5 Media Blocks
2 Link Styles
1 Comment List
1 Action List
1 Paragraph

11. DEFINA VALORES DEFAULT

12. #weatherModule h3 {
color: red;
}
#tabs h3 {
color: blue;
}

13. #weatherModule h3 {
color: red;
}
#tabs h3 {
color: blue;
}
h3 {
color: black;
}
#weatherModule h3 {
color: red;
}
#tabs h3 {
color: blue;
}

14. EVITE ESPECIFICAR ELEMENTOS

15. div.error {
color: red;
}

16. 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;
}

17. USE A ORDEM DA CASCATA A SEU FAVOR

18. html body .myModule div .hd
{
margin-bottom: 10px;
}

19. html body .myModule div .hd
{
margin-bottom: 10px;
}
.myModule .hd {
margin-bottom: 10px;
}

20. EVITE ESPECIFICAR LOCALIZAÇÃO

21. .sidebar ul li a {
color: red;
}
.header ul li a {
color: blue;
}

22. .sidebar ul li a {
color: red;
}
.header ul li a {
color: blue;
}
.sidebar {
color: red;
}
.header {
color: blue;
}

23. .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;
}

24. .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;
}

25. .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;
}

26. NÃO ACESSE UM NÓ DE UM OBJETO DIRETAMENTE

27. .inner {
color: red;
}
.tr {
color: blue;
}
.bl {
color: black;
}

28. .inner {
color: red;
}
.tr {
color: blue;
}
.bl {
color: black;
}
.weatherMod .inner {
color: red;
}
.weatherMod .tr {
color: blue;
}
.weatherMod .bl {
color: black;
}

29. SEPARE A ESTRUTURA DO VISUAL

30. #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;
}

31. #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;
}

32. SEPARE O CONTAINER DO CONTEÚDO

33. .myObject h2 {
font-size: .8em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

34. .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;
}

35. 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

36. 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