Avoid Inline Styles for CSS

Best Practices with CSS

CSS has become the de-facto way to style and lay out Web pages, but now that most people are using it, we need to start paying attention to how we're using it. There are three ways to use style sheets, and while they all have distinct purposes, there are good ways to use them and bad ways. Understanding the best practices of CSS Web design will make sure your Web pages are as good as they can be.

What Does CSS Best Practices Mean

Best practices are those methods of designing and building Web pages that have been shown to be most effective and get the most return for the work involved.

Best practices for CSS can help improve your site in the following ways:

  1. Separate content from design
    One of the main goals of CSS is to remove the design elements from the HTML and place them in another location for the designer to maintain. That means that a designer doesn't have to also be the content developer to maintain the look of the Web site.
  2. Make maintenance easy
    One of the most forgotten elements of Web design is the maintenance. Unlike print materials, once you put out a Web "magazine" it doesn't go away. Things change - from the look of your site to the content and links within it. And having your CSS in a central place makes it that much easier to maintain.
  3. Keep your site accessibile
    Using CSS styles can keep your site more accessible both to disabled people and to robots like search engines.
  4. Your site will stay current longer
    By using best practices with your CSS, you're using standards that have been proven to work and remain flexible as the Web design environment changes.

    Inline Styles Are Not Best Practice

    Inline styles, while they have a purpose, are not the best way to maintain your Web site. They go against every one of the above benefits:

    1. Inline styles don't separate content from design
      In fact, inline styles are exactly the same as embedded font tags and other design tags that we're trying to stop using. The styles only affect the exact tag they are applied to, and while that might give you more control, it also makes other aspects of your design and development more difficult.
    1. Inline styles cause more maintenance headaches
      When you're working with style sheets, it can sometimes be very difficult to figure out where a style is being set. When you add a mixture of inline, embedded, and external styles and you have even more locations to look. And if you work on a Web design team or have to redesign or maintain a site built by someone else, then you're going to have even more trouble. Then, once you find the style and get rid of it, you'll have to get rid of it on every element on every page where it's been placed. Which can increase your maintenance work astronomically.
    2. Inline styles are not as accessible
      While a screen reader or other assistive device might be able to handle the attributes and tags effectively, some of the older devices don't and can result in some strange Web pages. Plus, the extra characters and text can affect how your page is viewed by a robot such as a search engine, so your page optimization would not do as well as a page with external style sheets.
    3. Inline styles make your pages bigger
      If you set a style on every paragraph on your site, you can do it once with like 6 lines of code and an external style sheet. But if you do it with an inline style, you'll have to add those styles to every paragraph of your site. If you have 5 lines of CSS, that's 5 lines multiplied by every paragraph on your site. That bandwidth can add up in a hurry.

      What Is the Best Practice for CSS Instead of Inline Styles

      Instead of using inline styles, use external style sheets. External style sheets give you all the benefits of CSS best practices and are easy to use. If you must put styles in a specific HTML document, put them in embedded style sheets in the <head> of your document. That way, at least they're still separate from the content. Avoid using inline styles for any styles on your Web page. On pages I design, I try to use inline styles only for while I'm testing - I can add the styles to an element and know that with the cascade, those styles will take affect.