Code Quality in CSS

One monumental principle of computer engineering is that software should be maintenance. It means that it shouldn’t be hard to read, write, and edit existing software. This is easier to say than practice. However, I believe that few simple rules have make a big difference here. Bellow is a list of my best practices that encourage maintainable CSS code.

Avoid Acronyms

In general, do not use acronyms in class and id names.  Only widely used acronyms are acceptable, those that are not specific to any project or team. The rule of thumb is, when a new programmer joins your team, they shouldn’t have to learn any acronym.

Many critics say that if you don’t use shortcuts and acronyms, you have to type a lot. That’s not an issue to me. Typing is not hard. I’d assume that any programmer knows how to type without looking at the keyboard. Typing few characters more should not be a concern. The only issue is how easy it is to read and understand code. Both acronyms and very long names make it harder to read code.

Establish and Follow Convention

If there is a convention in a project, follow it. Don’t invent or force your own convention on others. If there is no convention, document and introduce a new one. Usually, there is more than one way to do something. Some project use camel case for variable names, other project use underscores. It doesn’t really matter, as long as there is some reasonable convention.

Make sure to document your convention. Simply write down a bullet-point list of rules to follow. Include a short example for each one. Convention go out of style if they are not documented.

The most common convention in CSS is to use “-” or “_” in class and ID names. If all class names use “_”, then it’s easy to remember how to spell things out that way. If some names are written one way and others another way, it’s you always have to look up the spelling.

Avoid Nesting

Avoid having complicated, nested rules. Preferable, every rule should have a single selector. Here is a complicated rule:

div.first-sidebar .news-banner > .title {}

Instead, the title element should have a more specific class assigned to it. That would simplify the code, make it easier to move banner to a different position, and even improve rendering time. The above should be replaced with:

.news-banner-block-title {}