Perfecting the Stylesheet: Common Errors Made by CSS Beginners

As web design continues to transition from a professional occupation to a worldwide hobby, an increasing number of people are becoming acquainted with creating designs which are controlled by extensive stylesheets. While it’s true that these files are often much simpler to create and maintain than vast XHTML documents, it’s also true that CSS is a notoriously “picky” programming language that requires exact punctuation, minimal spacing, and a strict adherence to perfect semantics from start to finish.

With so many new web designers taking up this hobby and committing themselves to creating standards-valid website with deep stylesheet formatting, a few patterns have emerged in terms of common errors. Whether it’s the forgotten semi-colon or the standards-incompatible lack of quotation marks around font names, those new to the field of web development can enjoy greater success by avoiding these common CSS pitfalls that are made all too often.

1. Don’t Forget Those Quotation Marks!

It’s something that most developers feel they can ignore, mostly because forgetting quotation marks through out a CSS file will not alter the appearance of a website like the same error would when by an XHTML document. However, since the early days of stylesheets, the W3C, has directed that all font names with a space in them be surrounded by quotation marks when placed into a CSS document.

This comes into play when crafting the “font-family” line of code which determines which fonts will be used by the browser to display blocks of text. Typically, web designers are encouraged to use several font names so that the browser has plenty of fallback options in the case of missing fonts.

Just for clarification, the example below is how quotation marks should be properly used in a stylesheet when a font name containing spaces is used within the “font-family” element:

font family: "Times New Roman", "Times Roman", Roman, serif;

Notice that the quotation marks surround only the font, and do not surround the comma which separates each font name from each other. That’s an important distinction, as including the comma within the quotation marks would essentially inform the browser that the comma is part of the font name. That would result in a large number of “lost” fonts in most browsers, and most users would probably end up viewing content in only the most basic serif or sans-serif system fonts.

2. Remember to Comment a Stylesheet

Most web designers new to stylesheets are actually unaware that they can add brief “comments” to their document as they create it, helping to break this large set of styles in to easy parts that can be searched, moved around, and deleted when they are no longer needed. Comments are denoted by slashes and asterisks both before and after the comment itself. When it’s put together, it looks like the following:

/* This is a CSS Comment */

Just like XHTML, the comment code is a “mirror image” of itself. It must be opened and closed by the same forward slashes, with the asterisk appearing directly afterward. No spaces can be between the two punctuation marks, though there can be spaces between the opening and closing indicators and the text that actually comprises the comment.

Using this feature of CSS is especially helpful to young web designers, who can comment on exactly what each class, ID, or form element does as they write it. That will save them confusion in the long run and it will make things easier to edit and repair during the W3C validation process that all developers should run their stylesheets through.

3. Don’t Forget the Punctuation

The number one thing that causes a stylesheet to stop functioning is the lack of punctuation that can cause elements and classes to run together. While stylesheets are inherently rather basic and pragmatic, they do make extensive use of commas, brackets, and semi-colons when indicating the closure of an element, class, ID, or form element. A well-designed CSS class looks like the example below:

.class {
margin: 0;
padding: 0 3px 0 3px;
font-family: "Times New Roman", "Times Roman", Roman, serif;
color: #000;
}

Notice that every line of code within the brackets ends with a semicolon which indicates that a new element has begun. Failure to include this semicolon can actually have disastrous effects on the rest of the stylesheet. Some browsers interpret a lack of semicolons as an indication that the entire stylesheet is invalid, and they will thus refuse to apply its instructions to a website. Still others will consider every element after the lost semicolon to be invalid, while some browsers will only stop parsing the CSS code until the closing bracket of the affected element.

Furthermore, most web browsers will treat a lost bracket the same way, refusing the parse the rest of the stylesheet’s information until the bracket is replaced and the affected class is closed. And, of course, there are those browsers which, upon seeing an invalid punctuation mistake, will simply disregard the entire stylesheet.

4. Use Shorthand Whenever Possible

The key to a great CSS file is to cut down on the actual size of the file and make it perform all of its functions in the most efficient way possible. The best way to do this is to simply use shorthand wherever possible. Stylesheets actually have a robust number of elements that can be cut short and, as any web designer should know, less characters equals a smaller file size. This is especially true in text-only documents like stylesheets and raw XHTML files.

The first way to execute shorthand thought a stylesheet document is to cut short the color codes for black and white. These are typically six-digit hexadecimal codes that simply repeat themselves; white is coded as “#ffffff” while black is formatted as “#000000.” Because most stylesheets can simply infer that these color codes are being used after the first three characters, designers can actually chop them in half. That means black can be written as “#000” while white is placed into a stylesheet as “#fff.” Cutting these hexadecimal color codes in half, especially in a document that is rich in blacks and whites, can actually cut a stylesheet’s file size down considerably — and that isn’t the only way developers can save space in the document.

Another great way to save on space is to leave out unnecessary elements like the “px” operator for margins and padding designations of zero. Many novice developers write things like “0px” throughout their documents, indicating that the size of the border is zero pixels. This is largely because every other definition of element size throughout the stylesheet is denoted in pixels and ends the “px” suffix. However, when the margin or padding element is zero, no pixel designation is needed. The stylesheet simply infers that this is a zero-pixel element and fills in the blanks automatically. This is a huge space-saver in many stylesheets which intricately define the size of elements, borders, and spacing.

5. Use the TROUBLE Method to Avoid Repetitious Elements Throughout CSS Classes

The novice developer often assumes that each side of a box — top, left, bottom, and right — must be styled and defined separately. In fact, CSS even include such indicators in its specification. That’s why elements like “margin-right” and “padding-left” exist and are used so frequently. And while there is nothing invalid about this method of writing a stylesheet, it’s needlessly wasteful in terms of file size and can extend a page’s loading time significantly when used throughout the document. Here’s what a beginner’s stylesheet might look like when defining the padding of an element:

.class {
padding-left: 0;
padding-right: 0
padding-top: 0;
padding-bottom: 0;
}

Looks wasteful, right? And it is, in fact, quite a waste of space. To resolve this problem, simply use the TROUBLE method when composing the size of margins and padding elements throughout the stylesheet. This method is so named because it corresponds to the order of pixel definitions: top, right, bottom, and left — in that order. The significantly condensed stylesheet element for the same class above would be reduced to one line, and it would look like the example here:

.class {
padding: 0 0 0 0;
}

Three lines of code are effectively eliminated, while the function of the element is maintained. Of course, this example overlooks the fact that, if all of the padding destinations are zero, only one number is required in the condensed element. Still, this serves to illustrate the point that it’s easy to designate the most common multiple-line CSS elements to just one line.

6. Too Much Whitespace? Eliminate It.

Here’s an interesting fact about CSS: This common programming language does not require a single space between lines of code, classes, or other design definition elements. Those blank lines are permitted, however, and there is nothing preventing developers from using them. It’s not considered invalid or a bad practice at all. It is, however, considered a waste of space and the file’s size, and this can lead to slower page loading times. When in doubt, remove spaces and use comments to indicate the purpose of elements rather than spacing them out and causing the stylesheet file to become so excessive.

Remember to Code Carefully and with Common Sense

The key to mastering CSS is simply to code deliberately and carefully from start to finish. The programming language itself is quite picky, and the number of ways to cut down on the amount of work and blank lines are numerous. Code with good common sense, always test new classes and lines of code before closing the file, and remember to double-check for any missed brackets, semicolons, commas, or quotation marks.

With good, deliberate coding, CSS errors can be avoided and websites can be made stunning.

Author: (40 Posts)

Vladislav Davidzon is the principal of US-based online marketing consultancy Vladislav Davidzon & Associates, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world.

Comments