CSS Best Practices

computer displaying css

Top 10 List: CSS Best Practices

Below, I have selected my top steps to take in order to enhance your CSS journey. Although they are all important, the eighth CSS Best Practice is crucial.

Please visit the Form page to complete a survey so I can continue to bring you helpful articles both on this site and as a monthly newsletter.

1. Code HTML before CSS

Web Developer Glen Stansberry recommends coding the HTML mockup prior to creating a CSS file. He states this method will save the designer time because they will know what will need to be coded into a CSS file to produce the desired results.

CSS styles are also more apparent in a HTML file with sufficient elements and content. This allows you to see your styles and make adjustments depending on how the page content displays.

2. Use External Styles

Although CSS styles can be embedded or added in-line on individual HTML files, it is recommended by Swarnendu De, co-founder of tech company Innofied, to use external style sheets. This method allows the web developer to make changes in a single CSS file to affect the styles in all HTML files linking to it. HTML files can be linked to a CSS style sheet by placing the following code in the head tags:

<link rel="stylesheet" href="filename.css" media="screen">

3. Organize Your Styles

Styles should be organized and coded ranging from broad at the top of the CSS file, to specific towards the bottom. In other words, styles that apply to many elements should be coded before styles that are very specific.

An example of a broad style that should be coded first would be the Universal Selector, because it applies to all elements in the file. This should be followed by the body, and other elements increasing in specificity towards the bottom of the file. Elements such as classes and ids are the most specific of all, so they should be coded last.

4. Don't Repeat Yourself

Technology author Chris Minnick urged web developers to consider redundancy in their CSS codes. For example, if different heading elements are going to be coded with the same color and font type, they can be coded together by placing a comma between them before the brackets, as shown below:

h1, h2, h3 { color: #999966; font-family: arial, sans-serif; }

This keeps the coding concise, changing the like elements to one shared style all at once.

5. Add Comments

Don’t forget to label and organize your CSS styles by adding comments. You can make comments in a CSS file that do not interrupt your coding by writing them like this:

/*CSS Comment Here*/

Comments help to categorize styles, and this makes it easier to locate specific elements when modifications are necessary. For example, the styling of headings can be grouped together, or the styles for images appearing on the pages. They can also be helpful to temporarily disable sections of code without deleting it to try new styles because everything within them is ignored.

6. Formatting for Print

If the content for your website will be printed off by users, it is a good idea to create a second CSS file to format your site to be printer friendly. This can be done by creating a separate CSS file where non-essential elements, such as navigation, are not displayed.

nav { display: none; }

A link to the print stylesheet would need to be added to the head section of the web page as well:

<link rel="stylesheet" href="filename.css" media="print">

You can download a copy of the Printer friendly CSS File for this website here.

7. Classes & Ids

Classes & Ids are used to apply styles to specified elements. Classes can be used on more than one element on a page, while Ids are used on only one. This is beneficial if you want to style several elements of the same type differently. For example, if your page has several H2 headings, but you want only one of them to be a centered, you could use an Id to style only that one heading. Class and Ids both require information in the HTML and CSS document to function.

<h2 id="center">My Centered Heading</h2>

After adding the Id and value into the HTML, it can be styled in CSS. Id’s begin with the hashtag sign to indicate it is an id occurring only once:

#center { text-align: center; }

Classes are used in much the same way but can be added to multiple elements on a page. In CSS, classes are denoted with a period before the name. Here is an example of the HTML and CSS for a class:

<h2 class="center">My Centered Heading</h2>

.center { text-align: center; }

8. Validate Your CSS

As you create your CSS code, it is important to ensure it validates. This process is easily done by using a free online tool, such as the one below:

W3C’s CSS Validation Service

CSS stylesheets can be uploaded onto the site, using the URI, or the code can be copied and pasted into a text box.

The check time usually takes less than a second and it will show you where errors are located so they can be fixed. For example, if you had an opening tag and a missing closing tag, it would let you know there was an error detected on that line.

This simple step provides peace of mind when coding a stylesheet. Validating CSS can be done throughout the process of coding, as well as checking your final sheet. It really is a great method to ensure your code is working properly and nothing is missing.

9. Grid Layouts

Grids allow you to easily arrange the layout of specific elements on a web page. Grids are comprised of both columns and rows. They are created by specifying the location of the grid along with the rows and columns each element within the grid occupies. Before implementing a grid layout, it is helpful to draw it out first.

sketch of a grid layout

In the above example, there are two columns composed of vertical 3 lines and three rows composed with 4 horizontal lines. The code to specify this grid could be created by placing an id around the content in the html (I used a div with the id “wrapper” in this example). The corresponding CSS with a 150px column for navigation would look as follows:

#wrapper { display: grid; grid-template-columns: 150px auto; grid-template-rows: auto; }
header { grid-row: 1 / 2; grid-column: 1 / 3; }
nav { grid-row: 2 / 4; grid-column: 1 / 2; }
main { grid-row: 2 / 3; grid-column: 2 / 3; }
footer { grid-row: 3 / 4; grid-column: 2 / 3; }

10. Use Media Queries

Media Queries provide a way to specify styles to specific viewport sizes—this is especially helpful when developing a responsive website. Chris Coyier of CSS-Tricks.com recommends using Media Queries as opposed to creating individual CSS sheets for each screen size. This outdated method required creating separate files and attaching each as a link in the head section of every HTML page.

Creating a single CSS file containing Media Queries for different screens allows for one CSS file to be edited. Each Media Query should be created below your main styles in your CSS file, so they don’t override existing styles. They are often based on screen width in pixels, and it is not uncommon to include more than one Media Query. A Media Query for a tablet might begin like this:

@media (min-width: 600px) {

}

In between the curly brackets is where you place your styles that are specific to that screen size. They are all coded as you normally would while contained within the Media Query brackets.

Media Queries can be used to apply different image sizes for different sized viewports, remove non-essential content or adjust navigation for small phone screen viewing, and more. The possibilities are endless!