reusable css files
Today my final article on specific css files. After dealing with whitelabel and blacklabel css files it is time to finish this miniseries with something a little easier on the mind. This article will handle base css files and will explain (and put into focus) the fuzz concerning these type of files a little while back.
what are base css files?
I usually refer to base css files as files that can be taken from project to project without alteration. They contain classes and css declarations that are useful in about every project and don't need any tinkering to work.
The two most common examples of these type of files are the reset.css and the fonts.css. Both files are meant to be included before the site specific css and have a well-defined function to aid you in your site styling quest. The reset.css file is made to give you a clean start on the most popular browsers by resetting their base css declarations. The fonts.css does the same but focuses on fonts in particular.
sounds good ... right?
Both files are pretty handy but not too long ago a fuzz was created around the use of these files. Two main arguments were brought to the table.
The first has everything to do with loading times. A popular topic for some time now and it doesn't seem to be going away anytime soon. These extra css files cause extra http request which results in longer loading times. They also contain redundant css declarations that are either unneeded or overruled later on. All these things have a negative effect on the loading time of a web page.
A second argument is more idealistic in nature and is heavily related to the issue I described in my article on learning javascript. Since these files hide some of the complexities of css they do dumb down the authors who use them. Some people do not realize the problems that exist between browsers and when they are faced with a project where they cannot rely on their base css files they are left powerless to fix some problems.
make it right
While both of the above arguments are valid, they can be easily bypassed. The http request issue is not really an issue when you integrate the css declarations into your own css file. The only remaining problem is those few redundant declarations which could be removed but amount for such little overhead that it's hardly an issue at all.
And rather than download a pre-made reset.css file it's probably better to make your own. That way you learn about the issues of browser styling but still benefit from the ease of use of such css files. They will also grow and change over the years, I've been using my own little preset for a while now and from time to time I make some little changes to it. Maintaining such a css file is actually a pretty constructive experience.
example
/* =============================================================== */ /* 00. base styles */
/* set base body ................................................. */ body {font:13px/1 arial,trebuchet MS,tahoma,helvetica,clean,sans-serif; background:#000; color:#fff;}
/* general reset ................................................. */ * {margin:0; padding:0;} html, body, form, img, fieldset, legend, table, tbody, thead, tfoot, tr, th, td {border:none;} li {list-style:none;}
/* hide elements from screen but not from source ................. */ .hidden {position:absolute !important; top:-999em; left:-999em;}
/* clearfix class ................................................ */ .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clearfix {display:inline-block; display:block;} conclusion
There is nothing wrong with using base type css files, just as long as you know what you are doing. It is even better if you can integrate them into your main css file. Copying a file from one project to another is just as much work as copying a section in your css, so no problems there. Just know what your base css files do and why these css declarations are in there.
If you have that covered, they are pretty useful and let you concentrate on more important issues, so don't feel bad using them, no matter what you have read elsewhere.