CSS Reusable Classes
— When you regularly work on similar projects, you often find yourself typing the same code over and over. That’s the reason why many of us use code templates and base style sheets. For example, it’s very common to have a base CSS style sheet with browser resets styles to use as a start point. This practice surely is a great and handy way to speed up our workflow.
I found that its also a great addition to include what I like to call helpers. By this I mean reusable classes that do common stuff like floating elements, adding a border, indenting text, etc. The idea might seem simple and the classes even a bit silly but I can assure you that once you have them incorporated they will surely speed up your coding process.
The Classes:
I have compiled below some I found myself using lately in almost every project.
/* HELPERS
/////////////////////////////*/
.float-left { float:left }
.float-right { float:right }
.align-left { float:left; margin: 0 15px 0 0 }
.align-right { float:right; margin: 0 0 0 15px }
.clear { clear:both }
.center { margin: 0 auto }
.margins { margin:15px }
.push-top { margin-top:15px }
.push-right { margin-right:15px }
.push-bottom { margin-bottom:15px }
.push-left { margin-left:15px }
.border { border:10px solid #eee }
.text-left { text-align:left }
.text-right { text-align:right }
.text-center { text-align:center }
.text-justify { text-align:justify }
.underline { text-decoration:underline }
.highlight { background-color:#ffc }
.indent { text-indent:15px }
.no-indent { text-indent:0 }
Usage example:
<img src="pic.gif" alt="Pic" class="align-right border"/> <p class="text-justify">Lorem ipsum dolor sit..</p>
As a simple example you could use helpers to justify a paragraph and align an image with a border to the right of it.
I Hope you find them useful!. Feel free to leave your own reusable classes on the comments!
nice tip, i will definitely gonna try this out. thank you!
Thanks, Im glad you find it useful
What’s the point of using a css class that has a presentation aware name? You could use directly a style attribute to obtain the same effect.. Style sheet purpose is to separate semantic code (xhtml) from its presentation: using these classes you embed presentation deep in html, with all the issues of this approach.
Thank you for the comment, I understand your point and think it’s a valid one. All i have to say is that the point of these classes is to save time and don’t repeat code cause when you code similar sites each day it does make a difference ( at least for me ).
In response to Piccolo, I have to say that by having the CSS classes, you can easily change them when, for example, the client decides they want all indenting to be a little bit less (cause they are using an iPhone), or maybe a little bit more (because they are using a 24″ LCD. Or maybe they want to change the colour of the highlighted text, which you can do with a single line, rather than changing possibly hundreds of lines of HTML.
Also, it’s nicer on the developer to string together a couple of classes to achieve the desired effect, although if you are using more than 3 at once, you probably want to make a new class.
@Michael:
It’s not the use of css classes that I’m discussing, it’s the naming.
.highlight is an acceptable name, but .indent is not: if you write up a custom css for iphones, you will be stuck with a indent class that does not indent; in case of layout changes you can move a menu easily changing float rules, at the price of living with a .float-left class that sends div to right…