Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Coding Style
It might appear as though style sheets are too simple for the developer to need to worry about coding style, but, in practice, the capability to quickly read and understand styles is vital. Using a consistent set of coding style conventions will ensure that both the developer and those who follow him can more easily read, understand, and maintain the code in the future. This section presents some basic guidelines for writing clearer CSS code:
- Use a standardized file-naming scheme.
- Position styles consistently in documents.
- Use character case consistently.
- Use indentation and alignment consistently.
- Use descriptive identifiers for classes and IDs.
Use a Standardized File-Naming Scheme
Select filenames that describe the purpose and usage context of the styles. Use a .CSS extension to communicate to developers and administrators that this is an external style sheet file. Using the .CSS extension also ensures that Web server software applies the correct handling to the file.
As with all source code files, it's best to adopt a set of rules for valid filenames. Filenames should consist of alphanumeric characters. If symbols are allowed, they should be limited to the "-", "_", and "." symbols. While names should be descriptive, they should be limited to a reasonable length. About 16 characters is long enough to be descriptive but short enough that URLs don't get ridiculously long.
Position Styles Consistently in Documents
Keep source code files well organized to make them easier to understand and maintain. Place embedded styles in the HTML document's head section, after any links to external style sheets. The embedded styles can appear either before or after sections of client-side script, but then be sure to use the same convention in all source files.
As illustrated in Listing 8, it's also a good idea to surround embedded styles with the HTML comment characters (<!-- and -->), to hide them from older browsers that do not understand CSS.
Listing 8: An HTML Document Head Section with an Embedded Style Sheet
<head>
<!--
<style type="text/css">
h1 {
font-family : Courier New;
font-size : 40pt;
letter-spacing : +2pt;
color : MediumBlue;
}
</style>
<script language="JavaScript">
function makeProper(vElement) {
var sText = vElement.value;
var c = sText.substring(0,1).toUpperCase();
var sRight = sText.substring(1, sText.length);
vElement.value = c + sRight;
}
</script>
-->
</head>
Also organize the styles in a style sheet according to a consistent scheme. For example, organize the style sheet into three sections, one for styles bound to HTML tags, one for styles bound to classes, and one for those bound to individual element IDs. Then within each group, organize the styles alphabetically. This scheme will make large style sheets much easier to maintain.
Use Character Case Consistently
Select an approach to using character case to maximize readability in CSS, and follow it consistently. One approach that works well is to use all lowercase attribute names and mixed-case attribute values for readability. The code in Listing 8 illustrates this approach.
Use Indentation and Alignment Consistently
Listing 8 also demonstrates the use of indentation and alignment to improve the readability of the code. Indenting the attribute-value pairs that make up each style helps organize the code, especially in style sheets containing many styles. Lining up all the attribute values helps the reader to mentally summarize each style.
Use Descriptive Identifiers for Classes and IDs
As we discussed in the previous article, the selector for a style can refer to a class or ID value. The Web developer defines these identifiers in the HTML. CSS code will be much clearer if the developer uses descriptive identifiers. For example, a class name such as RedHighlight is much more descriptive than a generic class identifier such as Class1. Other developers will be much more likely to reuse a style with a selector of RedHighlight because it is obvious at a glance what it does. This might seem like a laughably obvious practice, but it's amazing how many development tools use poor identifier names for automatically generated code.
As with all programming, the adoption of standard programming style conventions for CSS helps maximize the maintainability and reusability of code. Understanding how CSS works helps developers make decisions that maximize the application's performance.
Conclusion
This article concludes our introduction to the fundamental concepts of CSS, how it fits into a Web application, and guidelines for using CSS to help maximize the maintainability and reusability of Web application code. You've seen how CSS provides a language to allow Web developers to do two things: to specify enhanced style characteristics for the elements of a Web document in a standardized fashion, and to separate the content of a Web document from the rules about how to display it. The next article in this series kicks off our look at client-side scripting, the primary method of introducing greater interactivity into Web applications.