Best practices for efficient and maintainable CSS
Sometime ago writing efficient and maintainable CSS was easy because of fewer specifications, but as the specifications increased it became increasingly difficult to write large CSS files that are easy to maintain. Hereâs a round-up of best practices, tools and tips to produce super clean, optimized and maintainable CSS files.
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.
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.
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.
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
Best practices for efficient and maintainable CSS was originally published on Techdaily.Pk
