Embed Size (px)
DESCRIPTION
Melhore a performance com o OOCSS.
Citation preview
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
