1. Using "Class" and "ID" Indicators Incorrectly or Interchangeably
Perhaps the most common error made when creating a new website stylesheet, especially among new designers, is one that affects both the CSS code and its corresponding XHTML-based websites. Mixing up "class" and "ID" indicators when writing a stylesheet can send browsers into a mode known as "quirks mode," forcing the browser to render the page with its own unique engine rather than adhering to broader web standards. Though the switch between classes and IDs won't necessarily impact how an element is styled, it can have sweeping effects on the page's ability to render properly in some browsers.
Before writing a single line of CSS code, it's important to understand the one, key difference between these two indicators:
Classes are used to indicate elements that will occur more than one time on a page. The most common instance for this would be a class that applies to a series of blog posts or sidebar widgets. Classes are also used to style links within a broader "div" element on the page. A class, as designers should already know, is indicated by a dot before the class name in a stylesheet.
IDs, conversely, are used to indicate an element that will occur only once on the page. This is most often used when styling a masthead, sidebar, or main content area of the site. It can also be used to style a single list on the page or another element that simply won't be repeated. IDs are indicated by a pound sign before the name of the ID in a stylesheet.
Understanding the difference between classes and IDs at the outset of a new design's creation will ensure better render on all platforms, and it will reduce the number of errors indicated by the W3C's excellent CSS Validator tool.
2. Neglecting Shorthand and Creating an Excessively Verbose Stylesheet
Page loading times are one of the most important factors that major search engines consider when determining where a site ranks in keyword-targeted results. For this reasons, designers are always looking for ways to reduce website file sizes and create a more compact design that loads in an instant. Likewise, the W3C has been answering this need for some time by enabling shorthand when creating a website's stylesheet. One of the most common instances of excessively verbose styling looks something like the example below:
margin-right: 0px;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
This example provides two ways to reduce the number of characters used to create the same effect on the production website. The first is to eliminate the top, right, bottom, and left indicators for the margin. The second is to eliminate unnecessary "px" unit indicators. In CSS, all of the top, right, bottom, and left styling information can be condensed by using a simple acronym: TRouBLe. The margin is simply listed in order from Top to Right to Bottom to Left. Furthermore, a zero-pixel margin requires no "px" suffix. The above example, when corrected, looks like this:
margin: 10px 0 10px 5px;
Another great way to shorten CSS code using shorthand is to simplify border styling information. Instead of using something like this example:
border-bottom: 1px;
border-color: #ffffff;
border-style: solid;
Designers could simply condense this into a single line:
border-bottom: 1px solid #fff;
This accomplishes a few things: It brings the border into a single line and reduces whitespace, and it condenses the color code into just three characters. Colors like black and white can easily be split in half, since their number simply repeats indefinitely in order to produce the color on the page.
3. Using Redundant Properties When the Styling is Exactly the Same
Many designers new to CSS aren't aware that they can actually use commas to create a list of properties that all use the exact same styling. This is an excellent way to save a significant amount of space, especially when two or more elements use duplicate styling information and don't require any unique characteristics between them. An example of redundant elements looks like the following:
.comment-box {
background-color: #000;
color: #fff;
margin: 20px 0;
padding: 0;
}
.tweet-box {
background-color: #000;
color: #fff;
margin: 20px 0;
padding: 0;
}
.facebook-box {
background-color: #000;
color: #fff;
margin: 20px 0;
padding: 0;
}
To correct this common problem, designers simply need to create a list of these classes and then apply the font color, background color, margin and padding information to all of them. It looks like this when corrected:
.comment-box, .tweet-box, .facebook-box. {
background-color: #000;
color: #fff;
margin: 20px 0;
padding: 0;
}
The result is a stylesheet that is significantly smaller in size, quicker to load, but just as effective when producing consistent styling across the website. Even better, these identical elements can have their appearance modified behind the scenes by simply altering one piece of styling information. It doesn't get easier than that.
4. Failing to Have a Backup Set of Fonts for Older Systems
One of the great advantages of choosing CSS 3.0 over its earlier counterparts is that it includes the new ability to use non-standard fonts. This means designers can actually upload their favorite font and have both desktop and mobile browsers download it on the fly, displaying it on the website with ease. The problem, of course, is that CSS 3.0 is rather new and plenty of people are using web browsers that are rather old. Without a fallback option, it's up to the browser or operating system to fill in the gaps and display text however it sees fit. That means designers open themselves up to the possibility of a nonstandard design across different browsers or platforms.
Though it can be tempting to "force" the design to look a certain way in terms of typography, this is simply not a good design philosophy. Designers instead need to create a series of fallback options so that they can ensure at least some semblance of uniformity across older and newer systems. Below, designers will find an example of what not to do:
font-family: "Helvetica Neue Light";
or
font-family: Helvetica;
It's no secret that Windows and Linux-based platforms lack the Helvetica font under most conditions. Furthermore, virtually every platform lacks the Helvetica Neue font family unless the user has gone out of their way to install it. In the absence of these fonts, the system will refer to its basic serif or sans-serif font. That's bad news for designers as well as for site usability. Correcting the problem is simple, and it looks like this:
font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;
When creating a standards-valid "font-family" specification in a stylesheet, designers should always list their fonts in order of priority. Since Helvetica Neue Light is an exceptional font that will be downloaded via CSS 3.0 code, it comes first. Helvetica, the closest equivalent to Helvetica Neue Light on older platforms, comes next. Arial is the Windows version of this font, so it comes next. Finally, the sans-serif font is a low-level, standard system font that can be found on every platform. This provides a baseline for how the text will be displayed. For fonts like Georgia and Times New Roman, a similar baseline is the "serif" font.
5. Failing to Comment on Elements and Provide Clarity
The great thing about shorthand in CSS is that it makes the file quicker to load on production websites. That produces all kinds of goodwill from search engines, leading to better rankings and a better approach to SEO. There is at least one fatal flaw with shorthand, however: Everything starts to look the same, and it can be hard to remember which aspect of the code controls which part of the website. Designers can solve this problem by learning how to comment within their stylesheet, however. Comments make it easy to label certain sections of the website or provide a handy reminder about what a given element controls in terms of the site's visuals.
In CSS, proper commenting happens like the following example:
/* Sidebar boxes */
Anything between the "/*" indicators is ignored by the browser when it reads, renders, and applies the stylesheet to the website. It's okay to include longer descriptions between these comment marks as well, and all kinds of punctuation can be placed within a typical comment. Just remember that the comment must be ended with a closing "*/" before styling can resume. Failing to close a comment can lead to all sorts of headaches on the production website until the error is remedied.
6. Using Color Names Instead of the Appropriate Hex Codes
In the early days of designing websites with HTML, things were pretty basic. Most designers relied on the browser's rendering engine to get the job done, and this allowed for the use color "names" to indicate the color of the page's background, navigational elements, and more. It's something that is still seen in many stylesheets today, but it's a very big mistake that can cost the website its uniformity across different browsers, devices, and platforms. An example of this common mistake is below:
background-color: red;
In a practical sense, this does make the background color of a given element turn red. Most designers will be satisfied with this result, but they shouldn't be. Because the color is spelled out, it becomes a "subjective" color. The browser decides what red is, and it then applies its unique shade of red to the website. A different browser might believe that red is a slightly different shade, so it will apply its own take on the color when the site is rendered.
This creates a few problems, not the least of which is that the background may not match graphics created for the website in a standalone application. Furthermore, it can create issues of color matching and appropriate contrast. With each browser putting a slightly different color on the page, there's no clear indication that the page will be readable and usable across different platforms.
Hex codes are the best way to solve this problem and they are now the accepted standard for creating colors on websites. Instead of letting web browsers do the rendering and interpret the color, hex codes actually specify an exact, cross-platform color. To correct the example above, the designer would amend it to look like this example:
background-color: #ff0000;
This is a universal code that all browsers use in the exact same way. The color produced is uniform across all browsers, platforms, and devices, and is even uniform in graphic design apps and more.
7. Not Designing for Print Media Sources
Designing for the screen is only one component of what CSS is capable of. Indeed, using a separate stylesheet for when a website’s content is printed can be an asset to today's designers. it allows for the hiding of header, navigation, footer, and sidebar elements, and focuses solely on the written content. Like all good CSS applications, it creates a uniform way of printing content across browsers and platforms so that designers can ensure quality and consistency to their users.
Be sure to create a separate stylesheet for print, named "print.css" that hides graphical or unnecessary elements when printing the page's content. Insert that stylesheet into an existing site using a "print" media type, and save the file. Users will be grateful almost immediately.
Common Mistakes are Always Accompanied by Easy Solutions
Whether it's eliminating whitespace, adding comments, or leveraging the power of shorthand to create a fast-loading website, the solutions to each of these common problems is actually very easy. With long-term benefits that resonate with users, content creators, designers, and search engine robots, it's time to start solving these problems and creating a healthier, more consistent website design overall.
William Forrest, 15 November, 2013
#1 is a really common mistake of developers, even in our office is see this issue a lot.