CSS best practices

CSS best practices

Online by JSC0d3
August 4, 2016 | | 923 recognitions

The readability of your CSS is incredibly important, though most people overlook why it’s important. Great readability of your CSS makes it much easier to maintain in the future, as you’ll be able to find elements quicker. Also, you’ll never know who might need to look at your code later on.

When writing CSS, most developers fall into one of two groups.

.div { background: red; padding: 2em; border: 1px solid black; }
.div {
  background: red;
  padding: 2em;
  border: 1px solid black;
}

Both practices are perfectly acceptable, though you’ll generally find that group two despises group one! Just remember – choose the method that looks best TO YOU. That’s all that matters. </editors-note>

Along the lines of keeping your code readable is making sure that the CSS is consistent. You should start to develop your own “sub-language” of CSS that allows you to quickly name things. There are certain classes that I create in nearly every theme, and I use the same name each time. For example, I use “.caption-right” to float images which contain a caption to the right.

Think about things like whether or not you’ll use underscores or dashes in your ID’s and class names, and in what cases you’ll use them. When you start creating your own standards for CSS, you’ll become much more proficient.

Some design purists scoff at the thought of using a CSS framework with each design, but I believe that if someone else has taken the time to maintain a tool that speeds up production, why reinvent the wheel? I know frameworks shouldn’t be used in every instance, but most of the time they can help.

Many designers have their own framework that they have created over time, and that’s a great idea too. It helps keep consistency within the projects.

I disagree. CSS frameworks are fantastic tools…for those who know how to use them.

If you’re just getting started with CSS, I’d personally recommend that you stay away from these frameworks for at least a year. Otherwise, you’ll only confuse yourself. Learn CSS…then take shortcuts!

Most CSS frameworks have a reset built-in, but if you’re not going to use one then at least consider using a reset. Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. The reset allows your layout look consistent in all browsers.

The MeyerWeb is a popular reset, along with Yahoo’s developer reset.

It always makes sense to lay your stylesheet out in a way that allows you to quickly find parts of your code. I recommend a top-down format that tackles styles as they appear in the source code. So, an example stylesheet might be ordered like this:

  1. Generic classes (body, a, p, h1, etc.)
  2. #header
  3. #nav-menu
  4. #main-content

Don’t forget to comment each section!

/****** main content *********/
 
styles goes here...
 
/****** footer *********/
 
styles go here...

Elements in a stylesheet sometimes share properties. Instead of re-writing previous code, why not just combine them? For example, your h1, h2, and h3 elements might all share the same font and color:

h1, h2, h3 {font-family: tahoma, color: #333}

We could add unique characteristics to each of these header styles if we wanted (ie. h1 {size: 2.1em}) later in the stylesheet.

Many designers create their CSS at the same time they create the HTML. It seems logical to create both at the same time, but actually you’ll save even more time if you create the entire HTML mockup first. The reasoning behind this method is that you know all the elements of your site layout, but you don’t know what CSS you’ll need with your design. Creating the HTML layout first allows you to visualize the entire page as a whole, and allows you to think of your CSS in a more holistic, top-down manner.

Sometimes it’s beneficial to add multiple classes to an element. Let’s say that you have a <div> “box” that you want to float right, and you’ve already got a class .right in your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so:

<div class="box right"></div>

You can add as many classes as you’d like (space separated) to any declaration.

Be very careful when using ids and class-names like “left” and “right.” I will use them, but only for things such as blog posts. How come? Let’s imagine that, down the road, you decide that you’d rather see the box floated to the LEFT. In this case, you’d have to return to your HTML and change the class-name – all in order to adjust the presentation of the page. This is unsemantic. Remember – HTML is for markup and content. CSS is for presentation.

The doctype declaration matters a whole lot on whether or not your markup and CSS will validate. In fact, the entire look and feel of your site can change greatly depending on the DOCTYPE that you declare.

Learn more about which DOCTYPE to use at A List Apart.

I use HTML5’s doctype for all of my projects.

<!DOCTYPE html>

You can shrink your code considerably by using shorthand when crafting your CSS. For elements like padding, margin, font and some others, you can combine styles in one line. For example, a div might have these styles:

#crayon {
    margin-left:    5px;
    margin-right:   7px;
    margin-top: 8px;
}

You could combine those styles in one line, like so:

#crayon {
    margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.
}

If you need more help, here’s a comprehensive guide on CSS shorthand properties.

Just like any other language, it’s a great idea to comment your code in sections. To add a comment, simply add /* behind the comment, and */ to close it, like so:

/* Here's how you comment CSS */

Block elements are elements that naturally clear each line after they’re declared, spanning the whole width of the available space. Inline elements take only as much space as they need, and don’t force a new line after they’re used.

Here are the lists of elements that are either inline or block:

span, a, strong, em, img, br, input, abbr, acronym

And the block elements:

div, h1...h6, p, ul, li, table, blockquote, pre, form

While this is more of a frivolous tip, it can come in handy for quick scanning.

#candy {
    color: #fff;
    float: left;
    font-weight:
    height: 200px;
    margin: 0;
    padding: 0;
    width: 150px;
}

CSS compressors help shrink CSS file size by removing line breaks, white spaces, and combining elements. This combination can greatly reduce the the file size, which speeds up browser loading. CSS Optimizer and CSS Compressor are two excellent online tools that can shrink CSS.

It should be noted that shrinking your CSS can provide gains in performance, but you lose some of the readability of your CSS.

JSC0d3's Logo
About JSC0d3

JSC0d3 is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

On the same idea

Posted by | July 9, 2017

Grid systems are an incredibly powerful tool when creating any sort of website There are many grid systems out there, such as Bootstrap and Zurb...

Posted by | July 8, 2017

There are numerous advantages of WordPress SASS for WordPress developers You have most likely heard numerous contentions for utilizing a...

Posted by | July 7, 2017

Writing in SCSS lets you use features that don't exist in CSS yet like variables and nesting The biggest feature though, in my opinion, is mixins I'm...

Previous PostBackNext Post

Leave here an impression