CSS-WELL-DONE

Aprender CSS não é complicado! Mas escrever folhas que crescem com facilidade de suporte e que o navegador consegue ler de forma rápida é complicado. Quando falamos de CSS estamos falando de um monstrinho duas caras que no início mostra ser bem legal, só que no passar do tempo ele começa a aprontar com a gente. Vários desenvolvedores passam aperto com folhas de estilo pelo fato que não conseguem controlar seu crescimento e reaproveitar seus componentes em outros projetos. Se você está pensando que o reaproveitar que falei é sobre ser preguiçoso e não codar outra vez, calma aí que não é assim! Bom talvez tenha um pouquinho a ver com preguiça srsr.. A questão é que nem sempre você terá tempo de escrever tudo novamente em outros projetos mesmo aqueles com identidade diferentes onde tenha que montar digamos que 80% dos componentes do zero. Ao longo do meu tempo como desenvolvedor front-end venho buscado cada vez mais melhorar minhas folhas de estilo. Como já havia dito antes escrever uma folha de estilo de qualidade é um grande desafio, mas também não é uma tarefa complicada! Todo desenvolvedor já foi um pequeno gafanhoto (apesar que nunca paramos de crescer nessa profissão), garanto que um dia você já escreveu um CSS junto ao HTML porque no arquivo externo não estava pegando a propriedade ou então sem querer escreveu duas vezes propriedades que não haviam necessidade de se repetir, calma não se preocupe não vou te xingar e nem tacar pedra em você amiguinho, agora espero que a partir daqui você já tenha uma visão diferente de como escrever uma folha de estilo.

Antes de escrever sua folha de estilo pare e pense. É sério! Não cometa o erro de sair escrevendo qualquer nome só porque está com pressa de entregar o serviço. Você deve tomar cuidado ao escrever suas classes ou ids, principalmente quando se trabalha em agência onde pega desde pequenos e grandes projetos. Os nomes de suas classes podem fazer toda uma diferença desde ao início e até mesmo se você for reaproveita-las em outros projetos. Por falar em classes, não tenha medo de usa-las! Ao contrário de Ids elas são bem flexíveis podendo escrever mais de uma em um tipo de componente. Claro que a id tem sua vantagem de ser única e possibilitar uma leitura rápida, mas infelizmente sofrem desse probleminha chamado flexibilidade e que muitas vezes você não irá querer que uma determinada propriedade se aplique duas vezes. Uma coisa que já havia citado no texto anterior a este é que muitas vezes sem querer repetimos propriedades. Este tipo de propriedades podemos considerar como global. Aplicando que digamos em nosso reset ou então fazer a união de vários componentes e criar uma única regra específica, veja abaixo exemplos da maneira certa e errada.

MANEIRA ERRADA:

                                                   a{text-decoration: none;}
                                                   .lista a{text-decoration: none;}
                                               

MANEIRA CERTA:

                                                   * a, * a:hover{text-decoration: none;}
                                               

Tente evitar repetições desnecessárias. Isso será bom para leitura do arquivo e até mesmo futuros suportes.

Um detalhe importante, as regras globais devem vir sempre em primeiro lugar.

                                            *{
                                                margin: 0;
                                                padding: 0;
                                            }
                                            * a, * a:hover{
                                                color: #333;
                                                text-decoration: none;
                                            }/*Regra Global*/
                                            .bt{
                                                border-style: solid;
                                                border-width: 1px;
                                                color: #333;
                                                font-family: arial;
                                                font-size: 12px;
                                            }/*Regra global*/
                                            .botão-yellow{
                                                background-color: yellow;
                                                border-color: yellow;                                                
                                            }
                                            .bt-crimson{
                                                background-color: crimson;
                                                border-color: crimson;                                                
                                            }