Como otimizar css utilizando seletores de atributos css

Muitas vezes nos deparamos com códigos css confusos, ou html com milhões de classes e ids repetidos, que acabam gerando confusão e conflitos Cross Browser. Uma forma de minimizar isso é utilizando os seletores de atributos css corretamente. O nome pode assustar mas na verdade eles ajudam muito mais do que atrapalham e não são tão complicados assim. Um grande exemplo de onde utilizar esses seletores, são aqueles formulários que tem inputs de vários tamanhos. Por exemplo:

<form action="seu action">
<input type="text" name="nome" placeholder="nome" class="input_grande" />
<input type="text" name="email" placeholder="email" class="input_grande email" />
<input type="text" name="ddd" placeholder="ddd" class="input_pequeno" />
<input type="text" name="telefone" placeholder="telefone" class="input_medio" id="telefone" />
<input type="text" name="cep" placeholder="cep" class="input_pequeno_medio cep"  />
<input type="submit" name="enviar" value="ENVIAR" class="submit" />
</form>

E algum código css

.input_grande{width:500px;}
.input_medio{width:200px;}
.input_pequeno_medio{width:100px;}
.input_pequeno{width:100px;}
#telefone{color:#ff0000;}
.cep{text-align:right;}
.email{font-size:16px;color:red}
.submit{background:#000; padding:10px; color:#fff;}

Para evitar colocar esse monte de classes no html, poderíamos simplesmente utilizar os seletores de atributos no css:

input[name="nome"], input[name="email"]{width:500px;}
input[name="email"]{font-size:16px;color:red;}
input[name="ddd"]{width:100px;}
input[name="cep"]{width:150px; text-align:right;}
input[name="telefone"]{width:200px;}
input[type="submit"]{background:#000; padding:10px; color:#fff;}

E nosso html ficaria assim:

<form action="seu action">
<input type="text" name="nome" placeholder="nome" />
<input type="text" name="email" placeholder="email" />
<input type="text" name="ddd" placeholder="ddd" />
<input type="text" name="telefone" placeholder="telefone" />
<input type="text" name="cep" placeholder="cep" />
<input type="submit" name="enviar" value="ENVIAR" />
</form>

Bem mais legível, limpo e fácil de entender.
Estes seletores se baseiam nos atributos das tags html para colocar estilos. Pode ser qualquer tag, com qualquer atributo.
Veja alguns outros exemplos:

• O comparador atributo^=”valor” seleciona todos atributos que comecem com aquele valor, ou seja, você pode fazer isso, para colocar um estilo em particular em todos os links que apontem pro seu próprio site: a[ref^=”http://meusite”]{color:red;}
• Você pode colocar um estilo diferente para todas as tags a que tenham atributo href:
  a[href]{font-size:12px;}.
• Você ainda pode combinar esses seletores com pseudo classes: a[title=”titulo”]:hover{color:green;}

Um lugar onde você pode encontrar mais informações sobre estes seletores, é no site w3c: http://www.w3schools.com/cssref/css_selectors.asp

www.simplesharebuttons.comCompartilhe este conteúdo nas mídias sociais!