CODEWITHSUNDEEP
csssyntaxlanguage-design
Emanuil Rusev
Emanuil Rusev

Reputation: 35255

Why does CSS use colons ":" in rules?

CSS properties use no spaces so why isn't the first space in the rule used as a separator between the property and the value?

Here's an example:

enter image description here

Upvotes: 2

Views: 1179

Answers (7)

Mesh
Mesh

Reputation: 6442

I'd be willing to bet that most CSS parsers have some history of being written in C or C++ and the strtok function being used to parse the file, along similar rules for parsing a C/C++ file.

Others have already mentioned the ambiguity of using a white space separator.

The ; is another important part of the syntax in both C and CSS.

Upvotes: 1

PhiLho
PhiLho

Reputation: 41152

Lot of languages use the variableName: type notation (declarations of variables, of parameters, etc.). I saw one using variableName type (perhaps it was Go) and I was disturbed by the look. Even if it is unambiguous, it "doesn't feel right", perhaps because of habits, perhaps because it is lacking "rhythm". Punctuation in an English sentence isn't always necessary (sometimes it is, to avoid ambiguity), but lacking it makes readers uncomfortable. The eye needs to find marks.

Idem for F# (and its parent language), just omitting parentheses and commas for function parameters. It looks odd (but perhaps one can get addicted to this notation).

As always, there is a balance to strike, between too much annotations and too little. And between innovating and breaking habits... Innovation is nice, but it must have a purpose. Saving some keystrokes at the cost of readability is rarely a purpose. :-)

Upvotes: 1

Pekka
Pekka

Reputation: 449525

I am not sure whether a better answer can be given than "probably to avoid confusion".

Many elements in programming and markup languages are not 100% efficient in favour of improved readability. I personally find

background: red 1px url(images/test.jpg)

much, much clearer than

background red 1px url(images/test.jpg);

Upvotes: 13

Tom Gullen
Tom Gullen

Reputation: 61735

It's just easier to use. It's more semantic and it's future proof if they change the rules at a later date. It also makes debugging easier.

It's just an instance of usability over efficiency.

Upvotes: 5

kapa
kapa

Reputation: 78701

As others stated, it is needed to give a clear syntax, which is flexible enough to choose your style (write rules in one line? write one key:value per line? etc.).

Let me give you an example. You could write this:

a {
  border: 1px
  solid black;
}

If you leave out all the syntax characters, this will become:

a {
  border 1px
  solid black
}

This is ambigous, or from the other point of view, the syntax is too rigid.

Upvotes: 3

Fredrik Mörk
Fredrik Mörk

Reputation: 158329

Why not remove the curly-braces as well and let indentation dictate the structure? That would be even cleaner.

However, sometimes better syntax is not about removing everything you can imagine, you often need to keep something to keep the syntax clear as well. A syntax that is more clear expresses the intention in a better way than a cleaner, more implicit syntax. It's harder to make mistakes with an explicit syntax, and easier to spot those mistakes.

In your two examples, I find the first one a lot easier to understand, because the key and the value are clearly, explicitly separated.

Upvotes: 5

Paul
Paul

Reputation: 6871

An accidental space is easier to put in and harder to spot than a missing colon.

Upvotes: 10

Related Questions