HTML & CSS - Aula 5: Boas Práticas e Seletores Avançados

Na aula anterior...
propriedades.css
font
font-style
font-variant
font-weight
font-size
font-family
line-height
color
text-align
text-decoration
text-transform
text-indent
text-overflow
propriedades.css
list-style
list-style-position
list-style-type
position: absolute | relative |
fixed
top
left
float
clear
/*
* sprites
*/

Hacks NÃO recomendados
_propriedade: valor e -propriedade: valor
• Erro de parseamento
• Internet Explorer 6 e anteriores não reconhecem caracteres não alfanuméricos
inseridos no início das propriedades CSS
• Ignorada pelos outros navegadores.
• O Internet Explorer 7 corrigiu este bug.
*propriedade: valor
• Aplicada em todos os IE e ignorada pelos outros navegadores.
• Ao contrário dos caracteres _ e - as especificações para CSS não fazem reservas
ao asterísco como prefixo, assim usar este hack pode resultar em comportamento
inesperado com a evolução das especificações CSS.
Atenção: estes hack usa CSS que não valida!

Folha de estilo própria
Comentários condicionais
• Podem ser usados como hacks css
<head>


<link href=“default.css" rel="stylesheet" type="text/css">
</head>
ie.css ie6_anteriores.css default.css

Boas Práticas
Utilize a declaração abreviada das propriedades e indente seu código
.css {
margin: 12px 10px 5px 5px;
border: 1px solid #000;
}
é melhor que:
.css {
margin-top: 12px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
border-style: solid;
border-width: 1px;
border-color: #000;
}

Boas Práticas
Faça uma divisão lógica do seu CSS
/* Geral */
/* Cabeçalho */
/* Estrutura */
/* Rodapé */
/* Tabelas */
/* Formulários */
/* Botões */
outra possibilidade é usar o cssDOC
/**
* Geral
*/

Boas Práticas
Ordene as propriedades dos seletores
Por ordem alfabética
.seletor {
border
height
margin
padding
position
width
}
Por agrupamento lógico
.seletor {
[fonte e propriedades de texto]
[tamanho]
[plano de fundo]
[bordas]
[espaçamentos]
[posicionamento]
}

Boas Práticas
mainsidebar-nav
top
sidebar-social
footer
Estabelecendo padrões de nomenclaturas para classes e Ids e
Usabilidade dos nomes
conteudo

Boas Práticas
Especialize classes ao invés de criar seletores semelhantes

<div class=“box”></div>
<div class=“box green”></div>
/* css */
.box {
width: 50px;
height: 50px;
background-color: black;
}
.box.green {
background-color: green;
}

Boas Práticas
Agrupe os seletores para não repetir o código
p, a {
font: 12px Arial, Serif;
color: #000;
}
é melhor que:
p {
color: #000;
}
a {
color: #000;
}

Test Drive
1. Organize seu css segundo as boas práticas ensinadas

Elementos de estrutura
<header>
<footer>
<aside> <nav>
<section>
<header>
<article>
<footer>
<!DOCTYPE html>
<html>
<header> </header>
<body>
<aside> </aside>
<section>
<header> </header>
<article> </article>
<footer> </footer>
</section>
<nav> </nav>
</body>
<footer> </footer>
<html>

$E > F <!– html -->
<div>
<ul>
<li>Dedo mindinho</li>
<li>Seu vizinho</li>
<li><a>Pai de todos</a></li>
</ul>
</div>
<div>
<p><a>Fura bolo</a></p>
<p>Mata piolho</p>
</div>
/* css */
div { width: 50px; }
p, li {
font: arial 18px #000;
}
$div > p {
background: blue;
}
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolho

:matches :local-link <!– html -->
<div>
<ul>
<li>Dedo mindinho</li>
<li>Seu vizinho</li>
<li><a>Pai de todos</a></li>
</ul>
</div>
<div>
<p><a href=“page.html”>
Fura bolo </a></p>
<p><a href=“www.google.com”>
Mata piolho </a></p>
</div>
/* css */
p, li { font: arial 18px #000;}
div :matches(a,p) {
color: green;
}
a:local-link { color: red; }
• Dedo mindinho
• Seu vizinho
• Pai de todos
Fura bolo
Mata piolho

HTML & CSS - Aula 5: Boas Práticas e Seletores Avançados

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML & CSS - Aula 5: Boas Práticas e Seletores Avançados

Semelhante a HTML & CSS - Aula 5: Boas Práticas e Seletores Avançados (20)

HTML & CSS - Aula 5: Boas Práticas e Seletores Avançados

Notas do Editor