Se você é um desenvolvedor em início de carreira pode ser complicado lidar com CSS em suas primeiras aplicações web.
Confira a seguir uma lista de dicas básicas de CSS para iniciantes – e boas linhas de código!
Resetar o CSS
Cada navegador tem pré-definifo alguns atributos, como margins, borders, paddings, entre outros. Para evitar conflitos com a sua folha de estilos, trabalhe sempre com um Css Reset, que é uma classe especial que fará a função de “limpar a casa”. Na web você encontrará várias classes por aí, que você pode importar para o seu estilo principal. Veja um exemplo abaixo:
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
height:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Trabalhar com folhas de estilo
Se você acompanha o blog, nos tutoriais de CSS costumo escrever o estilo na própria página, para ficar mais fácil e didático. Contudo, se você está trabalhando em um projeto real, por menor e mais simples que seja, trabalhe sempre com links para suas folhas de estilo! Separar código, estilo e scripts é uma recomendação da W3C e uma maneira de deixar suas páginas mais legíveis e facilitar a manutenção, além do reaproveitamento do código. Para “chamar” um arquivo CSS em suas páginas, entre as tags <head></head> coloque um link para o arquivo CSS, indicando seu caminho:
<link href=”css/modal-window.css” rel=”stylesheet” type=”text/css”>
Escreva o mais resumidamente possível
Com certeza você já deve ter ouvido por aí que, quanto menos linhas de código, melhor. Então, ao invés de escrever assim:
.borda{
border-style: dashed;
border-color: #000000;
border-width: 20px;}
Trabalhe assim:
.borda{
border: 20px dashed #000000;}
Trabalhe com divs ao invés de tables
A não ser que seu dados sejam realmente tabeláveis, não utilize tables! Para a construção de templates e posicionamento de elemento trabalhe sempre com Divs! Se você tem alguma dúvida, consulte o artigo sobre posicionamento de Divs.
Entenda a diferença de ids e classes
Ao definir um estilo, podemos aplica-lo através de elemento com um id especificado ou através da utilização de uma classe. Se um tipo de estilo será aplicado somente a um elemento, prefira trabalhar com ids – e não se esqueça de, no documento HTML, nomear corretamente <elemento id=”id_elemento”>. Classes são utilizadas para serem reaproveitadas!
.exemplo{
/* chamada de classe */}
#exemplo{
/* chamada de ID */}
exemplo{
/* chamada de elemento - como H1, p, entre outros */}
Trabalhe com subníveis
Ao definir uma classe ou Id, trabalhe com subníveis daquele estilo. Por exemplo, se você definiu um estilo para um div e quer os seus parágrafos tenham um comportamento diferente, lance mão dos subníveis.
.exemplo p{
/* define estilo dos 'p' que pertencem à exemplo */}
