6 Dicas de CSS para iniciantes

Se você é uma desenvolvedora que está em começo de carreira, algumas dicas são uma “mão na roda” na hora de lidar com o CSS.

1. Use reset.css

Quando se trata de renderizar estilos CSS, navegadores como Firefox, Chrome e Internet Explorer têm maneiras diferentes de lidar com eles. O reset.css redefine todos os estilos fundamentais, para que você comece com uma nova folha de estilo em branco e consiga montar as suas próprias definições.

Existem diversos frameworks para resetar o seu CSS, mas, inicialmente, uma maneira sem firulas que já vai te ajudar bastante é essa:

reset de folha de estilo

2. Use o CSS abreviado

O CSS abreviado oferece uma maneira mais curta de escrever seus códigos e, o mais importante de tudo, torna tudo menos poluído e, por vezes, até mais fácil de entender. Mas, se você se sentir mais confortável com o modo estendido, não têm problema, você está apenas começando ;)

Exemplo de abreviação no uso de propriedades no CSS

3. Entendendo classe e id

Esses dois seletores costumam confundir iniciantes. Em CSS, a classe é representada por um ponto “.”, enquanto o id é representado por um hash “#”. Em poucas palavras, o id é usado para um estilo que é único e não se repete; já a classe, por outro lado, pode ser reutilizada. Quando se trata de CSS é mais interessante utilizar classe, pois o id é mais usado em Javascript.

4. Use <div> para criação de .container

A classe .container é utilizada na <div> mãe de todo o seu conteúdo, quando queremos garantir que o layout ficará alinhado corretamente à página. O container pode definir (ou não) as margens laterais da página e é também utilizado para posicionar o conteúdo no centro da tela.

Exemplo da classe .container dentro da <div> que vai abraçar todas as tags

As propriedades básicas que serão adicionadas à classe .container para alinhar o seu conteúdo, por exemplo, serão:

Exemplo de centralização da sua <div> aplicando a classe .container

5. Conheça a propriedade !important, mas tente não utilizá-la :/

Qualquer estilo marcado com !important será levado em consideração, independentemente se houver uma regra que o sobrescreva mais abaixo. Se você encontrar esse alerta por aí, já vai saber o que significa, mas tente não utilizar no seu código. Um CSS bem escrito não precisa desse alerta para sobreviver. A utilização do !important pode acabar deixando o seu código sujo e mais difícil quando você precisar alterar algo futuramente.

Exemplo do poder do !important

6. Mantenha seu código CSS limpo

Se seu código CSS estiver confuso, você acabará codando no meio da confusão e terá dificuldade em escrevê-lo. O melhor a se fazer é manter a indentação (usar os recuos e estruturar a escrita do código de maneira assertiva) e fazer comentários corretamente, desde o início, pois assim você não terá problemas no futuro. Para comentar dentro do CSS é só utilizar /* comentário aqui dentro */ como eu fiz ao comentar os trechos de código acima ;)

Esse texto é uma tradução livre do artigo em inglês 20 Useful CSS tips for beginners, junto de algumas considerações pessoais para deixá-lo mais didático e facilitar o entendimento para desenvolvedoras iniciantes.

Até a próxima! ❤