Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Sintaxe CSS

Publicado em: 2006-07-26 — 33.705 visualizacoes

A importância da sintaxe CSS

Historinha 1:

Em uma aula de português o professor escreveu uma definição para ditongo conforme mostrado a seguir:

Dirtongo é a reuniaum de duas ou mais vogais pronunçiadas de uma só vêiz. Uma destas vogais soa mais curta ou mais fraka que a outra e se chama-se cemivogal.

A definição está rigorosamente correta, mas o “prufessor” cometeu 6 erros de português. Escreveu certo de maneira errada.

…como você classificaria este professor?






Chegou mais perto quem marcou a última opção, embora as outras não estejam erradas. O cara que escreveu a frase, pode ser tudo na vida, menos professor de português.

Historinha 2:

Em uma lista de discussão sobre web standards o “disenvolvedor” escreveu o seguinte:

A regra CSS margin:0; é muito usada para estilizar o parâmetro BODY. Aqui o uso do atributo CSS margin, que normalmente aparece logo no início de uma folha de estilos define um parâmetro zero para as margens do documento. Na folha de estilos deverá ser declarada a função CSS: body { margin:0;}.

A definição está rigorosamente correta, mas o “disenvolvedor” cometeu 5 erros de sintaxe CSS. Escreveu certo de maneira errada.

…como você classificaria este “disenvolvedor”?






Chegou mais perto quem marcou a última opção, embora as outras não estejam erradas. O colega que escreveu a frase, pode ser tudo na vida, menos desenvolvedor web standards.


O emprego equivocado da terminologia CSS é muito mais comum do que se possa imaginar. E não são somente os recém-chegados às CSS que cometem estes tipos de erros.
A terminologia CSS compreende apenas 5 termos, repito, 5 termos. É uma lástima a quantidade de erros que se comente por desconhecimento do significado de 5 termos, repito, 5 termos somente.

Não existe atributo CSS, função CSS, comando CSS, parâmetro CSS, tag CSS, elemento CSS, e tantas outros termos inadequados que se escreve por aí

As especificações do W3C para as CSS define claramente que uma regra CSS é composta de um seletor e uma declaração e que a declaração compreende uma propriedade e um valor.

Na regra CSS a seguir:

h1 { color: blue }

a terminologia correta é:

  • h1 {color: blue} – regra CSS;
  • h1 – seletor;
  • { color: blue } – declaração;
  • color: blue – declaração;
  • color – propriedade;
  • blue – valor.

Estes são os 5 termos, repito, 5 termos normatizados da sintaxe CSS e ponto final. Não existe “atributo CSS” ou “tag CSS” ou “elemento CSS” ou “função CSS” ou tantos outros equivocadamente escritos.

Atualização: As CSS3 criaram valores CSS expressos por funções, tais como calc(), rgb(), hsl(), etc.

A frase acima escrita erroneamente deve ser corrigida para:

A declaração CSS margin:0; é muito usada para estilizar o seletor (ou elemento) BODY. O uso da propriedade CSS margin nesta regra CSS normalmente aparece no início de uma folha de estilos com a finalidade de definir um valor zero para as margens do documento. Na folha de estilos deverá ser declarada a regra CSS: body { margin:0;}.

Ao escrever seu próximo post em fórum, comentário em rede social, blog, lista de discussão e principalmente ao escrever um artigo, tutorial ou matéria sobre CSS, empregue a terminologia correta. Escrever atributo no lugar de propriedade está errado e no mínimo demonstra um conhecimento primário da sintaxe CSS.

Atualização: As CSS3 criaram valores CSS expressos por funções, tais como rgb(), hsl(), etc. Tutorial sobre a função CSS calc().

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-07-26 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/07/26/atributos-funcoes-parametros-css/trackback no seu site.

17 comentários na matéria: “Sintaxe CSS”

  1. rodrigoNo Gravatar disse:

    É Maujour eu estava usando o termo errado! :/
    Muito interessante!

  2. RodrigoNo Gravatar disse:

    Primeiramente PARABÉNS pelo post é muito interessante para mim, já que, eu venho aprendendo a desenvolver site somente pela internet, eu era uma pessoa propicia a esses erros pois não tinha essas informações. Obrigado!

  3. DanilloNo Gravatar disse:

    Esse é o futuro do Brasil.
    Os poucos que gravaram os 5 termos presentes no CSS são a exceção.
    Excelente post u.u

  4. Feira LíderNo Gravatar disse:

    Muito bom parabens

  5. Luis Augusto VulcanisNo Gravatar disse:

    Achei ótima a matéria, com certeza ja devo ter cometido este tipo de erro e é muito bom ter um suporte deste tipo, principalmente quando se ensina os outros.

    Valeu Mesmo!

  6. João Paulo FechineNo Gravatar disse:

    Hhehehe,.. bem colocado!

  7. Fabio BotelhoNo Gravatar disse:

    AHAHAHAHA !!!

    que vergonha…

    imagina só !! Uma pessoa dessas… ensinando ainda !!!!

    decepção…

  8. Wladmyr Martins ( Tio_Wlad )No Gravatar disse:

    Mea culpa, mea culpa, mea maxima culpa

  9. Areta do BemNo Gravatar disse:

    Poxa, eu então devo ter errado muito nessa minha pequena caminhada…

    Acho corretíssimo seu post sobre esses assuntos!

    Todo profissional deve estar receptivo ao feedbacks, e usá-los para galgar a perfeição.

    Valeu Maujor, obrigada!

  10. Sandro OliveiraNo Gravatar disse:

    Boa Maujor.

    As vezes confundo essas terminologias, mas quem não confunde né.

    O interessante é que temos que nos precaver de erros como esses acontecerem na hora de levar a idéia ao cliente…

  11. JoaresNo Gravatar disse:

    hehehe… curti essa… hehehe…

  12. Osny Santos NettoNo Gravatar disse:

    Quanta besteira numa só frase, mais confesso que erros como esses são cometidos até mesmo por pessoas que tem um certo conhecimento em Web Standards.
    Gostei da matéria, diferente.

  13. CrisNo Gravatar disse:

    Mas atributo e propriedade não diferem muito. Apenas a terminologia utilizada pela W3C cita sempre propriedade.

    Ou não?

    Já função, comando, parâmetro e tag fogem bastante do conceito. Isso acontece com todo mundo que está aprendendo.

    Parabéns pelo site e pelo blog.

  14. MaujorNo Gravatar disse:

    @Lucas
    Nesta altura da vida eu não me chateio por tão pouco 🙂
    Em qualquer profissão é básico o emprego da terminologia correta, daí o exemplo inicial do “prufessor” que poderia ser com um “inginheiro”, um “médicu” etc.
    @Micox
    Você tem razão. Grato por apontar o descuido. Correção feita.
    @Carlos Eduardo
    Vamos encarar como um alerta e não “puxão de orelha”

  15. Carlos EduardoNo Gravatar disse:

    Eu admito que às vezes me confundo e acabo usando os termos errados… Mas agora, depois desse “puxão de orelha”, não esqueço mais! =)

  16. MicoxNo Gravatar disse:

    hhehae. Ótimo post.
    Espero que eu não tenha cometido estes erros. hehhe

    Aliás maujor, em “{color: blue} – declaração;” a declaração não seria apenas o “color:blue;” (sem as chaves)?

  17. Lucas AlvesNo Gravatar disse:

    Caramba eim Maujor….você andou lendo um bocado de posts, artigos que lhe deixaram bem chateado hehehehe, mas o post ta valendo 🙂

    Abraços

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo