CSS

CSS (cascading style sheets) is a language for specifying how documents are presented to users — how they are styled, laid out, etc. Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge , are designed to present documents visually, for example, on a computer screen, projector or printer.

As a general rule of thumb, the content of your website should have a logical flow regardless of any styling. In other words, a user who has disabled CSS should still be able to understand your website's content.

More specifically, websites should not convey information by color alone. This is especially important for users who are color blind or who use a screen reader.

There may be inconsistencies between how the various browsers interpret CSS and display your website to users. This could be a result of a lack of support for certain CSS properties as well as conflicting or inconsistent implementations of CSS properties. You will need to test in the various browsers to ensure that your website design is cross-browser compatible.

Declarations

Use shorthand properties

Shorthand properties refer to combining multiple CSS property declarations into a single CSS property. Not only do shorthand properties reduce the size of a CSS file, but they also make CSS more readable.

/* BAD PRACTICE! */
#content-wrapper
{
    background-color: #FFFFFF;
    background-image: url("/images/content_upper.png");
    background-repeat: no-repeat;
    background-position: center top;
    clear: both;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
    padding-top: 10px;
    width: 661px;
}

This long rule declaration can be rewritten as:

/* GOOD PRACTICE */
#content-wrapper
{
    background: #FFF url("/img/content_upper.png") no-repeat center top;
    clear: both;
    margin: 0 0 20px 0; /* Top, Right, Bottom, Left */
    padding-top: 10px;
    width: 661px;
}

Note the use of the shortened hex code (#FFF instead of #FFFFFF) and the shortened zero pixel dimensions (0 instead of 0px).

Always use external stylesheets

Always place CSS in an external stylesheet linked to a web page within the document head. These external stylesheets can be cached by the browser and also uphold the separation of presentation and content principle:

<!-- GOOD PRACTICE -->
<head>
    <title>Hello World</title>
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen">
    <link rel="stylesheet" href="print.css" type="text/css" media="print">
</head>

Don't use `!important`

The !important keyword can be used to add "weight" to a CSS declaration.

Don't use `@import`

As an alternative to using link to import stylesheets, you can also import a stylesheet from within a stylesheet using the @import rule:

/* BAD PRACTICE! */
@import url("grid.css");

However, this is less performant than link as browsers will often end up downloading imported stylesheets sequentially, rather than in parallel as with the link tag. Due to these easily avoidable performance issues, don't use the @import rule.

Avoid hacks

Avoid using CSS "hacks" that target specific browsers in order to fix browser-specific problems:

/* BAD PRACTICE! */
* html
{
    /* These styles only apply to IE6 */
}

In a general, if you need to use a hack, this is a hint that either your CSS rules or your markup is too convoluted. Try reformatting one or the other using standard CSS techniques first and only use a hack as a last resort.

Use relative over absolute units

Prefer relative units (such as em, %, or rem) over absolute units (such as px).

By using relative units, elements on the page are better suited for adapting to various screen sizes and container widths. Furthermore, using relative units provides a smoother experience for users zooming in and out of your web pages using a browser's zooming features.

Don't generate content with CSS

Text content can be added to a page using the content property (with the ::before and ::after pseudo-elements). However, this content may or may not be read by a screen reader.

Given this ambiguity, you should never generate essential content using CSS.

Furthermore, since some screen readers do read content generated with CSS, you should also avoid generating non-essential content as well (for example, inserting a "double arrow" symbol next to links), since this content will be unnecessarily read to a user with a screen reader.

Altogether, you should avoid generating any content with CSS.

Use the "print" media query

A "print" media query can be used to change the display of your website when the user prints it:

/* GOOD PRACTICE! */
@media print {
    /* Hide the header when the user prints the page */
    #header {
      display: none;
    }
}

Naming

Give selectors semantically meaningful names

When choosing a name for a class or id selector, do not use a name that is linked to a specific implementation in CSS or markup or has no semantic meaning:

Vendor Prefixes & Browser Support

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new styles. An example:


#navigation li a {
    -webkit-border-radius: 20px; /* Specific to Webkit browsers (e.g., Safari) */
    -moz-border-radius: 20px; /* Firefox-specific */
    border-radius: 20px; /* Proper W3C form */
    display: block;
    height: 24px;
    filter: alpha(opacity=50); /* IE-specific */
    opacity: 0.5; /* Proper W3C form */
    -webkit-transform: rotateY(180deg); /* Specific to Webkit browsers (e.g., Safari) */
    -moz-transform: rotateY(180deg); /* Firefox-specific */
    -ms-transform: rotateY(180deg); /* Microsoft-specific */
    transform: rotateY(180deg); /* Proper W3C form */
}

Using a CSS property that requires vendor support will need to be updated and reviewed periodically.

Frameworks

Front-end frameworks are collections of guidelines and resources (JavaScript files, CSS files, etc.) to support the efficient development of websites. These frameworks generally include JavaScript or CSS that handle common “boilerplate” scenarios (laying out a website in columns, responsive navigation, and so on).

Examples of popular frameworks include:

While these frameworks are powerful tools, keep in mind that they come and go and have frequent updates: as a result, you should not plan on depending on a framework indefinitely or to answer all your needs. Instead, ensure you have a fundamental understanding of what the framework provides.

Development Web Standards Group