CSS guidelines – a complex subject.

We are going to dive deep into a subject that’s very complex; too complex to be contained by one single article, so we are going to make series out of it, to make sure we don’t overlook some important details.

Before talking about CSS guidelines, let’s see what CSS is.

CSS is short for Cascading Style Sheets. As a short definition, we can say this is a language that describes how things look in a document written in a markup language. If this explanation is not clear enough, we can also say CSS can decide if your text is red or greed, without having to specify this in each HTML. Think about, as a blogger, wouldn’t it be just horrible to write looks-relate code each and every time you write an article? And what if you want to change something in the way your blog looks. Would you go through 1000 articles just to modify a colour? That’s what CSS is for.

Now, there are some guidelines for CSS.

Taking into account universal guidelines when writing code will be useful in many ways. For you, everything will be in order and, if you have to modify/fix something, it will be easier. Same goes for those cases when you want to send your CSS to someone else to take a look over it or even sell it as part of a project; you won’t have to train him in your ways of coding. Also, if you are familiar with the guidelines, you will find it easier to modify some CSS files written by someone else (for instance those attached to the wordpress themes).

Formatting – A code that’s written on a single line and one that’s formatted on multiple rows will work just the same. However, a good code must be a clean code, so you have to keep everything in order. CSS is no exception here. According to the most popular guidelines, your formatting, at high level, should look like this:

  • 4 spaces indent (no tabs, we know you are using them)
  • 80 characters wide columns
  • multi-line CSS (obviously)
  • don’t abuse the white space

You should also use indentation for entire rulesets, to put emphasis on hierarchy and similarity.

(To be continued…)

source, photo