Do You Adhere to Strict BBC-Style CSS Coding Standards?

Key Takeaways

The BBC’s CSS coding standards are among the strictest known to web developers, with a focus on best-practice techniques, readability without CSS or JavaScript enabled, and adherence to published W3C recommendations.
The standards involve specific rules such as the banning of !important, the requirement of a page background color, and the use of compressed external stylesheets. Inline styles are prohibited and external CSS files must not be loaded using @import due to potential impairment of browser caching.
Despite the potential challenges for new developers, these guidelines offer well-documented expectations that help avoid basic usability mistakes. The standards also promote clean, efficient, and maintainable code through clear naming conventions, use of vendor prefixes, and recommendations on commenting and organizing CSS files.

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?

Frequently Asked Questions about CSS Coding Standards

What are the key differences between BBC’s CSS coding standards and other popular standards like Google or WordPress?

The BBC’s CSS coding standards are designed to ensure consistency and readability across all their digital content. They emphasize the use of lowercase, hyphen-separated class and ID names, and discourage the use of ID selectors for styling. On the other hand, Google’s style guide encourages the use of meaningful or generic ID and class names, and WordPress’s standards recommend specific naming conventions for classes and IDs. Each of these standards has its own unique approach, but all aim to promote clean, efficient, and maintainable code.

How does the BBC’s CSS coding standards handle vendor prefixes?

The BBC’s CSS coding standards recommend using vendor prefixes for CSS properties that are not yet standardized or fully supported across all browsers. This ensures that the CSS code will work correctly across different browsers, even if they interpret certain CSS properties differently. This is a common practice in many CSS coding standards, including those of Google and Mozilla.

What is the BBC’s stance on using shorthand properties in CSS?

The BBC’s CSS coding standards encourage the use of shorthand properties whenever possible. This is to keep the code concise and easy to read. However, they also caution developers to fully understand the implications of shorthand properties, as they can sometimes lead to unexpected results if not used correctly.

How does the BBC’s CSS coding standards approach commenting in CSS?

The BBC’s CSS coding standards recommend using comments to explain the purpose and functionality of the code. They suggest using comments to separate sections of the CSS file, and to provide context for complex or unusual code. This is in line with best practices for coding standards, as comments can greatly improve the readability and maintainability of the code.

What are the BBC’s guidelines for ordering CSS properties?

The BBC’s CSS coding standards do not specify a particular order for CSS properties. However, they do recommend grouping related properties together to improve readability. This is a common practice in many CSS coding standards, as it makes the code easier to understand and maintain.

How does the BBC’s CSS coding standards handle CSS selectors?

The BBC’s CSS coding standards recommend using class selectors over ID selectors for styling, as they are more flexible and reusable. They also discourage the use of overly specific selectors, as they can make the code harder to maintain and can lead to unnecessary complexity.

What is the BBC’s stance on using !important in CSS?

The BBC’s CSS coding standards discourage the use of !important, as it can make the code harder to understand and maintain. They recommend using more specific selectors or reordering the CSS rules instead. This is a common recommendation in many CSS coding standards, as the use of !important can often be a sign of poor CSS architecture.

How does the BBC’s CSS coding standards approach the use of media queries?

The BBC’s CSS coding standards recommend using media queries to make the website responsive and to ensure that it displays correctly on different devices. They suggest placing media queries at the end of the CSS file, and organizing them from smallest to largest based on the width of the viewport.

What are the BBC’s guidelines for CSS file organization?

The BBC’s CSS coding standards recommend organizing the CSS file in a logical and consistent manner. They suggest separating different sections of the CSS file with comments, and grouping related properties together. This can greatly improve the readability and maintainability of the code.

How does the BBC’s CSS coding standards handle CSS animations and transitions?

The BBC’s CSS coding standards recommend using CSS animations and transitions sparingly, as they can sometimes lead to performance issues. They suggest using them only when necessary, and to always test the performance of the website after adding animations or transitions.