{"id":51522,"date":"2022-07-28T04:39:19","date_gmt":"2022-07-28T07:39:19","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=51522&preview=true&preview_id=51522"},"modified":"2025-01-20T07:04:29","modified_gmt":"2025-01-20T10:04:29","slug":"melhores-praticas-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/","title":{"rendered":"14 Melhores Pr\u00e1ticas de CSS para Iniciantes"},"content":{"rendered":"

Quando voc\u00ea est\u00e1 come\u00e7ando com o web design, um elemento chave para fazer tudo funcionar corretamente \u00e9 como voc\u00ea quer que tudo esteja nas m\u00e3os do CSS. Abrevia\u00e7\u00e3o de Cascading Style Sheets, eles funcionam permitindo que voc\u00ea estilize os elementos HTML<\/a> da maneira que quiser.<\/p>\n

E embora voc\u00ea possa experimentar o CSS de v\u00e1rias maneiras – na maioria das vezes em linha – h\u00e1 uma maneira melhor de fazer isso. E isso est\u00e1 de acordo com uma s\u00e9rie de melhores pr\u00e1ticas que voc\u00ea deve seguir para garantir que seu c\u00f3digo<\/a> seja funcional, desprovido de volume desnecess\u00e1rio e bem organizado.<\/p>\n

Hoje, vamos destacar 14 melhores pr\u00e1ticas de CSS para iniciantes, mas at\u00e9 mesmo profissionais experientes devem \u00e0s vezes aperfei\u00e7oar o b\u00e1sico.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Confira nosso guia em v\u00eddeo com as melhores pr\u00e1ticas de CSS para iniciantes<\/a><\/strong><\/p>\n<\/kinsta-video>\n

1. Organize a folha de estilo (Stylesheet)<\/h2>\n

Sua primeira ordem de neg\u00f3cios ao aplicar as melhores pr\u00e1ticas do CSS \u00e9 organizar suas folhas de estilo. Como voc\u00ea abordar\u00e1 isso depender\u00e1 do seu projeto, mas como regra geral, voc\u00ea vai querer seguir os seguintes princ\u00edpios organizacionais:<\/p>\n

Seja consistente<\/h3>\n

N\u00e3o importa como voc\u00ea escolha organizar seu CSS, certifique-se de manter suas escolhas consistentes em toda a folha de estilos, bem como em todo o seu site.<\/p>\n

De classes de nomes a endenta\u00e7\u00f5es de linhas a estruturas de coment\u00e1rios, manter tudo consistente ajudar\u00e1 voc\u00ea a acompanhar o seu trabalho mais facilmente. Al\u00e9m disso, ele garante que fazer mudan\u00e7as, mais tarde, \u00e9 sem dor de cabe\u00e7a.<\/p>\n\n

Use as quebras de linha de forma liberal<\/h3>\n

Embora o CSS funcione mesmo que seja visualmente feio, \u00e9 melhor para voc\u00ea e para qualquer outro desenvolvedor que estar\u00e1 trabalhando com seu c\u00f3digo se voc\u00ea usar muitas quebras de linha para manter cada trecho de c\u00f3digo separado e leg\u00edvel.<\/p>\n

Tipicamente, \u00e9 melhor colocar cada propriedade e par de valores em uma nova linha<\/a>.<\/p>\n

\"CSS
CSS code<\/figcaption><\/figure>\n

Crie novas se\u00e7\u00f5es onde faz sentido<\/h3>\n

Novamente, como voc\u00ea configura suas folhas de estilo depender\u00e1 em grande parte do tipo de site em que voc\u00ea est\u00e1 trabalhando. Mas como regra geral, \u00e9 uma boa ideia criar se\u00e7\u00f5es de estilos, pois elas ser\u00e3o usadas. Ent\u00e3o, uma se\u00e7\u00e3o para estilos de texto, uma se\u00e7\u00e3o para listas e colunas, uma se\u00e7\u00e3o para navega\u00e7\u00e3o e links e assim por diante. Voc\u00ea pode at\u00e9 mesmo criar se\u00e7\u00f5es para p\u00e1ginas espec\u00edficas que podem ter estilos diferentes dos demais, como a loja ou FAQs.<\/p>\n

Comente seu c\u00f3digo<\/h3>\n

Mesmo que apenas voc\u00ea veja o seu CSS, ainda \u00e9 uma boa ideia ser minucioso com seus coment\u00e1rios. Os coment\u00e1rios ser\u00e3o parecidos com os seguintes:<\/p>\n

\/* This is what a standard CSS comment looks like *\/<\/code><\/pre>\n
Isto torna mais f\u00e1cil para voc\u00ea descobrir o que cada se\u00e7\u00e3o est\u00e1 em rela\u00e7\u00e3o a um relance sem ter que passar por cima de cada linha mais tarde.<\/p>\n
Os coment\u00e1rios podem ajud\u00e1-lo a definir as se\u00e7\u00f5es, mas voc\u00ea tamb\u00e9m pode us\u00e1-los para fornecer informa\u00e7\u00f5es sobre as decis\u00f5es que voc\u00ea tomou – especialmente se voc\u00ea sentir que pode esquecer mais tarde.<\/p>\n
Use folhas de estilo separadas para projetos maiores<\/h3>\n
Isto n\u00e3o se aplica a todos os sites, mas se voc\u00ea tem um site grande com necessidade de um monte de CSS espec\u00edficos, usar m\u00faltiplas folhas de estilo \u00e9 uma boa ideia. Ningu\u00e9m – incluindo voc\u00ea – deve ter que rolar por um tempo super longo para encontrar a \u00fanica linha de c\u00f3digo que voc\u00ea precisa.<\/p>\n
Evite o inc\u00f4modo e crie folhas de estilo separadas para diferentes se\u00e7\u00f5es do site – especialmente se elas tiverem estilos totalmente diferentes.<\/p>\n
Por exemplo, voc\u00ea pode desejar criar uma folha de estilo para estilos globais e outra para a sua loja online<\/a> com estilo dedicado para descri\u00e7\u00f5es de produtos, cabe\u00e7alhos ou pre\u00e7os.<\/p>\n
2. CSS Inline vs CSS Externo vs CSS Interno<\/h2>\n
Existem tr\u00eas tipos diferentes de CSS com os quais voc\u00ea pode precisar lidar ao construir um site e ajustar o seu estilo. Vamos falar um pouco sobre o que cada um \u00e9 e faz e depois discutir qual voc\u00ea deve realmente estar usando para seus projetos.<\/p>\n