• Ed. Salvador Trade Center
  • (71) 4042-1341​⁠​
  • (71) 98798-2767​⁠​

Padrões de Código de CSS do WordPress

Os padrões de código WordPress são para tornar mais legível, significativo, consistente e bonito o seu código PHP, HTML, CSS e JAVASCRIPT. E nesse artigo veremos alguns pontos sobre o CSS WordPress.

Todo mundo no comecinho da carreira já desenvolveu aquele código esquisito, que dias depois não conseguiu lembrar bem o que era, se perdia nos seletores, usava padrões de nomenclatura vistos na programação tipo o CamelCase, ou algo semelhante. Ter um padrão de escrita de código é essencial para que você e também outros na equipe entendam de maneira efetiva cada ponto do sistema. Para tanto, as famosas guide lines fazem com que gostos pessoais sejam ignorados e padrões de escrita se firmem.

Manter um padrão de escrita de código em um projeto Open Source é muito importante, talvez até mais importante do que para uma equipe presencial, que trabalha todos os dias juntos numa mesma empresa. Em um produto Open Source você vai receber contribuições de pessoas do mundo inteiro, de forma dessincronizada, com gostos diferentes. É muito importante nesse momento manter uma uniformidade no produto todo.

Confesso que eu não costumava seguir um determinado padrões em meus projetos. Mas ao conhecer os padrões de código do WordPress, fui me “consertando”. Acredito que talvez você também já tenha passado por isso em algum momento da carreira, então, pensando nisso, vamos ver aqui o fundamental sobre o CSS WordPress. Vai servir para você conhecer mais sobre os padrões de código do time do WordPress. Talvez você até adote alguns dos padrões deles em seus projetos.

 REGRA 1 – QUANTO A ESTRUTURA:

Não é difícil encontrar por aí códigos CSS nessa estrutura:

  1. #seletor1, #seletor2, #terceiroSeletor{
  2. propriedad: valor;
  3. propriedade: valor;
  4. }

E segundo a documentação do WordPress, esse tipo de estrutura é considerado incorreto e abaixo vemos três pontos pra corrigir e se dar bem com os padrões.

Corrigindo o exemplo acima ficaria assim:

  1. #seletor1,
  2. #seletor2,
  3. #terceiroSeletor{
  4. propriedade: valor;
  5. propriedade: valor;
  6. }

REGRA 2 – QUANDO AOS SELETORES:

Vamos direto aos pontos da regra, e observar sempre o exemplo anterior para demonstrar a correção necessária.

Corrigindo o exemplo anterior…

  1. #seletor-1,
  2. #seletor-2,
  3. #terceiro-seletor{
  4. propriedade: valor;
  5. propriedade: valor;
  6. }

REGRA 3 – QUANTO AS PROPRIEDADES.

OBS: Um ponto interessante, é que a documentação oferece até um ordenamento referente as propriedades. A lista a seguir mostra a indicação da documentação.

Há também uma outra indicação que é usada pelo pessoal da Automattic e desenvolvedores de temas do WordPress.com é ordenar as propriedades em ordem alfabética.

REGRA 4 – QUANTO AS VALORES.

Existem outros pontos que não falei aqui, mas você caso se interesse pode consulta-los na própria documentação do WordPress, aqui.

Bom gente, é assim que chego ao fim desse novo artigo que escrevo pra vocês, espero que gostem e qualquer dúvida, comente!

Fonte: Tableless

Posts Relacionados