Find Web Developers
Find Web Developers

A Neat Little CSS Trick to Speed Up Web Development

We’ve all been there, well, those of us who develop websites… anyway, my point is that we’ve all been in a situation like this. You’re building a website. You’ve already created the CSS for the main template layout and right now you’re working on putting elements into the website header. Let’s say you have a logo, a slogan, a phone number and contact email address. You work on laying these elements out nicely but some of the elements just look a little bit out of line. Chances are you may have set up individual styles for each element within your main stylesheet, if so, great. However, sometimes the temptation to put inline styling can be too much, especially if you’ve already spent hours on developing a website. I hate inline styling. It makes a website difficult to maintain but I do have to admit that it does carry advantages as it makes for a very quick way to position or format an element.

This is where a nice little CSS trick comes into its very own. If you are hell bent on relying on inline styling to some extent, then what you might want to consider is creating a separate stylesheet, let’s call this one “formatting.css” that contains a host of classes related to an individual property e.g.

.marginl20 { margin-left: 20px!important; }

.whiteText { color: #fff!important; }

This means that for any element in your webpage, you can simply apply a class from formatting.css and it will add that styling property to the element. For all intents and purposes, it is effectively adding the inline styling, just through a stylesheet. What’s even better is that it is easy to maintain as you only need to alter the class in one place. Granted, a class called “marginl20” is highly likely to only be used for a left 20 pixel margin, but there’s no stopping you in coming up with your own classes, perhaps with a more generic name. So going back to my example, if the phone number just won’t line up, then I could apply my margin top 2 pixel class to it and voila!

The second thing to note is the use of “!important”. This effectively tells the browser to always apply that property so this basically makes sure that our class will be applied correctly regardless of any other styling applied to that same element.

In my own CSS, I have styles ranging from fonts, colours, positioning through to margins, padding, widths and heights. I pretty much have widths that range from 50px numerically up to about 600px. The easiest way that I found to create all 550 of these rules, was to make use of Microsoft Excel’s “drag and repeat” feature. A copy and paste later, and I have my classes set up.

One potential drawback of using a stylesheet in this way is that when the browser loads it, it will read through the entire contents so could have a little bit of an impact on loading time. However, from my own experience, using CSS in this way has saved me a lot of time with those niggly bits and I will continue to work in this format until I find the next best thing.

Comments are closed.