Detailed explanation of BBC's strict CSS coding specifications

This article discusses the BBC's CSS coding specifications, which are well-known in the industry, emphasizing best practices, readability without CSS/JS support, and compliance with W3C standards.

Core points:

• BBC's CSS specification focuses on best practices and focuses on code readability, ensuring accessibility of web page content even when CSS and JavaScript are disabled, and strictly following the published W3C recommendations.
The
• specification contains specific rules, such as prohibiting the use of !important, mandating the page background color, and using compressed external stylesheets. Inline styles are prohibited and external CSS files cannot be loaded with @import to avoid potential browser caching issues.
• Although it can be challenging for novice developers, these guides provide well-documented documentation to help avoid basic usability errors. The specification also promotes concise, efficient and easy-to-maintain code through clear naming conventions, the use of vendor prefixes, and suggestions on CSS file annotations and organization.

General CSS Principles:

BBC uses XHTML 1.0 Strict as the content carrier, and the guide stipulates that web page content must be readable without CSS or JavaScript enabled. Many developers ignore this in order to quickly add the latest jQuery widgets. Most browsers (or extensions like Web Developer Toolbar) allow disabling CSS and scripts. If the content is unreadable, it cannot be read by Google and screen readers. According to the guidelines, all CSSs must comply with published W3C recommendations. This can cause some problems as it seems to exclude vendor prefix properties such as -moz-border-radius and -webkit-box-shadow. However, the BBC website does use them with caution. !important is forbidden because it overwrites the user style. This is a bit harsh because it is useful for IE6 fixes. That being said, I have also abused it for quick and rude modifications when the root cause of the cascade problem should be addressed. Finally, if you have given up on IE6, consider it for the BBC coders who are still testing in IE5.5! CSS in IE5.5 is especially bad: it tries to parse attributes, but it fails miserably.

CSS implementation:

All CSS is implemented in the form of a compressed external stylesheet, although CSS in the HTML header is allowed when a rule is required for a particular page. Inline styles are forbidden. This is very good. Any coder found using inline styles should revoke his Web development license! Interestingly, external CSS files cannot be loaded using @import because it affects browser cache. is that so? I suspect this is no longer the case in modern browsers.

Type and color:

A common font name (serif, sans-serif, cursive, or monospace) must be added at the end of all font-family properties. Again, this is something developers often forget: Not everyone has Arial or Helvetica on their computers. I like this double negative rule: > Typesetting size Not to use units that are not resized in all browsers, such as px and pt, except for print style sheets.

BBC recommends using em, % or keyword values, and after increasing the size by two steps in any level browser, the text must remain readable. I bet this will be a test nightmare! Finally, the developer must define the page background color. On one of my computers, after the default background color was set to disgusting green, I tattooed this rule on my forehead.

Developer paradise or hell?

If you have been in the industry for a while, you may have absorbed many of the guidelines developed by the BBC. But how do new developers deal with it? On the positive side, these expectations are well documented and can help coders avoid basic usability errors. However, development itself is hard enough—most people struggle to cope with multiple rules and regulations defined for 24 interrelated technologies. Does your company implement strict coding guidelines? Are they aligned or are they quite flexible? Are they reasonable or ridiculous? Are they updated regularly, or are you still writing code for Netscape 3.0? Will the guide help or hinder your daily development tasks? I also want to hear from any BBC developer...Did you strictly follow the rules or use them secretly when the manager is away?

!important

(The following is the FAQ part, which is consistent with the original text and no longer has pseudo-original creation)

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 maintainable 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.

The above is the detailed content of Do You Adhere to Strict BBC-Style CSS Coding Standards?. For more information, please follow other related articles on the PHP Chinese website!