Do You Adhere to Strict BBC-Style CSS Coding Standards?
The BBC website is one of the most popular destinations on the Web. It has a page rank of 9 and a reputation for quality reporting and resources.
Internally, the BBC also has some of the strictest guidelines known to web developers. It’s not just browser issues either — every aspect of technical development has a set of published rules.
I’ve been studying the recently-updated CSS Standards. They’re all best-practice techniques but they go further than many company policies!
General CSS Principles
The BBC uses XHTML 1.0 strict for content and the guidelines state it must be readable without CSS or JavaScript enabled. This is important but it’s often overlooked by many developers as they rush to add the latest jQuery widget.
Most browsers (or extensions such as the Web Developer Toolbar) allow you to disable CSS and scripting. If the content isn’t readable, you can guarantee that Google and screen readers can’t see it either.
According to the guidelines, all CSS must be valid according to a published W3C recommendation. I suspect that causes a few headaches as it appears to rule-out vendor-prefixed properties such as -moz-border-radius and -webkit-box-shadow. However, the BBC site does use them sparingly.
!important is banned because it overrides user styles. That’s a little harsh since it can be useful for IE6 fixes. That said, I’ve been guilty of abusing it for quick and dirty hacks when I should have addressed the root of the cascading problem.
Finally, if you’ve abandoned IE6, spare a thought for the BBC coders still testing in IE5.5! CSS is particularly nasty in that browser: it tries to parse the properties but fails dismally.
Implementing CSS
All CSS is implemented in compressed external stylesheet, although CSS in the HTML head is permitted when a rule is required for a specific page.
Inline styles are banned. That’s good. Any coder found using them should have their web development license revoked!
Interestingly, external CSS files must not be loaded using @import because it impairs browser caching. Does it? I doubt that’s still the case in modern browsers.
Typography and Color
A single generic font name of serif, sans-serif, cursive, or monospace must be added to the end of all font-family properties. Again, this is something developers often forget: not everyone has Arial or Helvetica on their PC.
I loved the double-negative rule:
Typographic sizes MUST NOT be specified in units that are not resizable in all browsers such as px and pt, except for in print stylesheets.
The BBC recommends either em, % or keyword values and text must remain readable when the size in increased by two steps in any level 1 browser. I bet that’s a testing nightmare!
Finally, developers must define a page background color. I’ve had that rule tattooed to my forehead after viewing one of my sites on a PC where the default had been set to a sickly green.
Developer Heaven or Hell?
If you’ve been working in the industry for a while, you have probably absorbed many of the guidelines laid down by the BBC. But how do newer developers cope? On the positive side, the expectations are well documented and it helps coders avoid basic usability mistakes. However, development is tough enough — most people would struggle to contend with multiple rules and regulations defined for 24 inter-related technologies.
Does your company enforce strict coding guidelines? Are they set in stone or reasonably flexible? Are they sensible or ridiculous? Are they updated regularly or are you still coding for Netscape 3.0? Do guidelines help or hinder your day-to-day development tasks?
I’d also be interested to hear from any developers at the BBC … do you follow the rules to the letter or have you sneaked in the odd !important when your manager’s not looking?
