CSS Resets and CSS Modules

I constantly get asked questions regarding how to get more control over layouts from developers and ways in which people can reduce the amount of code in their CSS (cascading style sheets), thus reducing file size and load times. Any improvement on the reduction of CSS file size, impacting on page load speed can benefit pro active SEO strategy, user experience and accessibility, so is something that we should all look at improving as part of our site optimisation and performance process.

So firstly, control, how can we gain more control over the CSS that we write for each new project? A great solution is to set our some ‘global’ CSS resets, basically removing any element of browser default styling so that we can have a little more control over each element that we create in our markup. By creating some basic CSS resets we can also reduce the amount of code we have to write, by reducing multiple margin, padding declarations for instance when creating a new element.

There are a few CSS reset resources available online that you can either link to in your project or download and implement in your local files. The most renowned CSS reset resources is probably Yahoo YUI Library: CSS Reset which is available with documentation here: http://yuilibrary.com/yui/docs/cssreset/.

My CSS Reset

The Yahoo CSS reset contains a lot of element styles that I personally have my own default styling for, but the following CSS are the main style resets that I use for each new project that I start:


/* Global Resets */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video {
    margin: 0px;
    padding: 0px;
    border: none;
}

/* Global Styles */
fieldset, img, a img {
    border: 0;
}


In addition some people may add position: relative; to the ‘Global Resets’ declarations for increased control of nested, absolute positioned elements.

Responsive CSS Modules

To further global resets there are also a wide variety of CSS modules available and a recent release from Yahoo named Pure is gaining alot of momentum due to its small size and responsive elements included. You can find out more on the Yahoo Pure site: http://purecss.io/.