Inline CSS Is Out of Style

This article aims to address some best practices when styling web pages and other practices to avoid. Let's start with some Best Practices when it comes to styling your websites with Cascading Style Sheets (CSS) - the first being that you should avoid inline styling at all costs. Let's take a look at an example of the right and wrong way to align an HTML element.

Bad

This is bad because it will lead to a mess of inline styles embedded all over your HTML markup. If you need to apply the styles of one page to another, you'll be spending a few hours inspecting your code to gather all the right CSS. Further, inline styling makes responsive design a nightmare. Just don't.

Good

HTML Page

CSS Stylesheet

This is miles better because it achieves the goal of separating your style and your HTML. Aside from a reference to your stylesheet in your HTML page, there should be no CSS. In the above example, we added a class of "centered-text" to the paragraph which allowed us to align the paragraph in our stylesheet. This allows us to take advantage of one of the inherent benefits of CSS: reusable selectors.

Organizing your Stylesheet

Ok so let's assume you've replaced all your inline CSS with classes and ID's and moved your styles over to a stylesheet that targets your HTML classes and IDs. Great. Let's take that one step further.

Bad

Generally speaking, we've all been in the situation where we add elements to our stylesheet haphazardly. So why is this bad? Several reasons. First off, you should always organize your stylesheets by section; if your website has a homepage, a news page, and a blog like our example, your stylesheet should reflect that organization. In the CSS above, all of the styles are jumbled together in no particular order. Within the code itself, there are redundant and inconsistent property values. 

Good

Notice how we took the same CSS from the first example and organized it so it is broken into sections and has opening and closing comments? The selectors within a section even follow the linear order as they appear on the page. Aside from better organization, we also standardized the ordering of the properties. This will help you find specific properties within a given selector. We also removed redundant properties, added fallback values for the font-family properties, and added some indentation to make the code readable. While many of these changes are small in scale, they make a significant difference when projected over the course of thousands of lines.

Organizing your Stylesheets

Although it is a Best Practice to maintain one stylesheet for your website there are occasions where there are so many lines of CSS that it may be ideal to break them up. This section will discuss best practices for organizing your CSS stylesheets when your website has more than one.

Bad

Why is this organization bad? Because there are so many different stylesheets with no indication of what the difference is between them. So if you're looking for a particular style, you'll need to go through all of these stylesheets or spend a lot of time inspecting in your browser. Save yourself and your fellow developers a lot of time and never do this.

Good

Unlike the "Bad" example, these stylesheets are named by what styles they contain. Looking for the styles for the blog page, or maybe the news section, or maybe even the team page? No problem. This designer was smart enough to name them all accordingly, making your life 1,000,000 times easier.

In Part I of our Series on CSS Best Practices, we covered the horror that is inline styles and how to use selectors like classes and ID's in your HTML markup to target your web pages with CSS. We also covered organizing your stylesheets to mirror the organization of your website and also went over best practices when managing multiple stylesheets. Over the course of a project, CSS tends to grow. Start with these core best practices and life as a web designer will be shockingly manageable. See you next time!