post: CSS Coding Standards

Home

CSS Coding Standards

Design And Development

  

Articles

CSS CSS3

Most developers when asked about coding standards think about structural languages such as PHP, Javascript, Ruby etc. and how the code is written. For many web languages there aren’t strict standards, more informal collaborative attempts at an evolving baseline. Such is the case for PHP with the PHP-FIG organisation.

However, it’s still the case that more often core standards are set at personal, product, or company level. This is particularly important when this involves multiple developers working on a project. In the case of a product this can set a sensible structure for modifications and contributions such as to open source projects like WordPress.

Much less though is given to CSS coding standards. Sure, there are recommended ways to implement certain tasks so that mark-up displays as much as standard across browsers, implementation of modern CSS3 tags, and removal of deprecated CSS1 & CSS2 tags from use.

That’s not what I’m talking about here. This is the actual structure of the stylesheets, and how the stylesheets are organised and broken down. Minimisation of CSS gets rid of the comments, spaces, and line breaks, but this doesn’t change the actual CSS itself.

In CSS, as in most web development languages, I’m self-taught. I’ve trawled through countless stylesheets from countless websites over the years, learning through reverse-engineering, and trial and error, with a lot of help from lots of specialist sites on the web such as css-tricks and stackexchange.

Still, it’s immediately apparent when looking at a stylesheet how much the developers cared about how they’ve developed the site, and to a degree an insight in to how they work.

Structuring CSS Stylesheets

When I look at a stylesheet, and when I produce my own, I like to see a sensible cascading structure, and if not minified, then some kind of index shown in the header with sections demarcated with comment blocks. The better ones have a top-down hierarchy where important global styles are set first. In many cases a standards compliant stylesheet such as normalize.css is used as the core. It’s the one I tend to migrate towards. This has been a trend for a few years now since the emergence of Chrome and Firefox and the concerted effort on standards compliance. Top loaded global styles make an effort – a good one overall – in getting round the quirks of CSS1 & CSS2 and creating a clean baseline on which to build the rest of the site.

If your code is minimalised for the live/production site then you should still have a development version to which changes can be made before testing. If you are selling your code as a theme / template then BOTH versions should be added to the files. Good enough for Bootstrap, good enough for you.

Structuring CSS Code Blocks

There’s two aspects to this I’d consider. One is mandatory, the other a matter of style, training and choice. Firstly, Vendor prefixes, and secondly, semantic structure.

Vendor prefixes are the result of browser developers building-in support for some newer features. It’s not a bad thing. Many modern browsers support the cutting edge CSS3 features, yet CSS2.1 has barely been signed off by the committees that set the regulations. A classic case is that of border-radius. Not strictly required now, but more often used as an example.

This should be written as:


.rounded-corners {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

and not:


.rounded-corners {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

Vendor prefixes come first. There’s a good article on CSS-Tricks that explains it in more depth.

How you add your css to individual code blocks is a matter of choice, sometimes it’s just how you start out doing things, and it evolves with experience. Again CSS-Tricks has an interesting article on this with a poll on preferred options. I’m in the 45% Grouped By Type set very similar to the Idiomatic CSS of Nichloas Gallagher

css-properties

1:Display & Position


.selector {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

or:


.selector {
  display: inline-block;
  float: left;
}

2:Size & Layout


.selector {
  width: 150px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

3:Thematic


.selector {
  background: #000;
  color: #fff
  border: 10px solid #333;
}

4:Font & Text


.selector {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

5:Structure


.selector {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

I will generally move the border style to this section.

6:Overrides and other


.selector {
  overflow: hidden;
  cursor: pointer;
}

Again this is personal preference. I prefer the Grouped style as it allows me at a glance to know what the code block is doing. In the case of hierarchy styles where multiple classes are defined in 2, 3 or more levels this gets increasingly important to know.

Over to you..

So, do you have a way of working with CSS. Do you have a preferred method of structuring your stylesheets? What about your code block standards?

comments powered by Disqus