Always create a table of content
As CSS files are becoming bigger and bigger, the easiest way to quickly find what you’re looking for is to create a table of contents and organize your ids and classes.
/* reset */ /* general */ /* typography */ /* header */ /* footer */ /* sidebar */ /* Home Page */ /* About Page */ /* Media Queries */
Above is an example of a CSS table of contents that you can reuse in your own projects.
Write your CSS the standard way
If you download code from the internet, I’m pretty sure that every once in a while, you stumble upon a very badly written piece of CSS. And the harder a code is to read, the harder it will be to maintain, this is why paying attention to the way you actually write your CSS is important.
There’s two “standard” ways of writing CSS. The first and most widespread is using the “block” style of writing:
#element{
margin: 0 auto;
width:80%;
display: block;
}
And the second is the “line” style:
#element{ margin: 0 auto; width:80%; display: block; }
In my opinion, the “line” style is great to use if you set no more than 3/4 properties. More than that, it can become kind of hard to read.
Use SASS
CSS used to be pretty simple, but as time go by, more and more features and possibilities are added to allow designers and front-end web developers to create awesome websites. But nowadays, a 500 line long stylesheet is not uncommon. Writing them, and especially maintaining them can be tedious.
This is where a preprocessor can help. Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and more.
Sass offers lots of possibilities which will make your CSS easier to maintain, and faster to write. The best thing is that the whole language is super easy. Below is an example of using variables in Sass:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Looks appealing, doesn’t it? If you haven’t installed Sass yet, then you probably know what you should do tonight!
Make proper use of ids and classes
In order to avoid redundancy in your stylesheets, it is important to make a proper use of both ids and classes.
Ids are for styling an individual element such as a logo:
#logo{
width: 250px;
height:90px;
display: block;
float:left;
}
On the other hand, classes are made to define styles that would be applied to various elements:
.box{
background: #E4F0FC;
margin: 1em 0px 1.5em;
padding: 9px 10px 9px 15px;
color: #555;
text-shadow: none;
font-weight: bold;
}
An element can have both an id and one or more class(es) as shown below:
<li id="comment-27299" class="item">
This is useful as you apply a general class to the element and an unique id which allows to set unique properties. For more information about ids and classes, check out this article by CSS master Chris Coyier.
Combine your stylesheets
Everytime you link to a CSS file on a HTML page, the client browser has to do a HTTP request in order to get that file. As each HTTP request takes time, you should always combine all your stylesheets into one and consequently make your website loads a lot faster.
Various tools for combining multiple CSS files are available. I’ve been using the online CSS Compressor with good results so far.
Use an editor
Most people use a very basic editor to create CSS files. While it is doable, using an editor made for CSS can make the whole job easier. There’s lots of different editors available, both free and paid, for all platforms.
My personal pick is Stylizer, a free Windows & Mac editor which provides a real time preview in various browsers and many more super useful features. If you want more choice to pick the perfect CSS editor for your needs, check out this list.
Use free tools to optimize and clean your CSS
There’s a ton of free tools available on the internet that can help you to produce better quality CSS.
Procssor cleans and organizes your CSS the way you want it. It allows you to define indentation, brace style, white space, etc. Perfect for css consistency when multiple people contribute.
Clean CSS is an online tool to beautify, minify, format, or compress CSS files as well as other formats such as JS or HTML.
As you can guess by its name, Unused CSS is a tool that explores all your pages and removes unused CSS and then lets you download the optimized files. A great tool to keep your stylesheets clean and up to date!
Minify or GZip your files
A great way to optimize your website loading speed and save on bandwidth is to minify or compress your CSS files. Minification is the act of removing whitespace, comments, and unnecessary semicolons. A minified CSS style will be about 80% of its original size. CSS files can easily be minified as well as unminified online.
Gzipping reduces response times by reducing the size of the HTTP response. A gzipped stylesheet is generally reduced by about 70%. Gzip can be activated by adding the following code into your server’s .htaccess file:
# BEGIN GZIP <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </ifmodule> # END GZIP