CSS best practices

[Bhooshan]

Hi Chris,

I have a simple question on CSS class writing and want to know if this is a good practice. Many a times, we have to deal with some CSS classes which are used at different places and due to the way they needs to render we are required to add different paddings/margins on those different instances. For example, I have a logo which I need to render at different instances and based on the type of layout I need to have different paddings or margins. Is a good practice to mention the margins/paddings inline in the HTML markup or would it make sense to write a set of classes like:

/* --- margin 20 --- <em>/
.gutter20 {margin:20px;}
.gutterTop20 {margin-top:20px;}
.gutterRight20 {margin-right:20px;}
.gutterBottom20 {margin-bottom:20px;}
.gutterLeft20 {margin-left:20px;}
/</em> --- margin 15 --- <em>/
    .gutter15 {margin:15px;}
.gutterTop15 {margin-top:15px;}
.gutterRight15 {margin-right:15px;}
.gutterBottom15 {margin-bottom:15px;}
.gutterLeft15 {margin-left:15px;}
/</em> --- margin 10 --- <em>/
.gutter10 {margin:10px;}
.gutterTop10 {margin-top:10px;}
.gutterRight10 {margin-right:10px;}
.gutterBottom10 {margin-bottom:10px;}
.gutterLeft10 {margin-left:10px;}
/</em> --- margin 5 --- <em>/
.gutter5 {margin:5px;}
.gutterTop5 {margin-top:5px;}
.gutterRight5 {margin-right:5px;}
.gutterBottom5 {margin-bottom:5px;}
.gutterLeft5 {margin-left:5px;}
/</em> --- padding 20 --- <em>/
.space20 {padding:20px;}
.spaceTop20 {padding-top:20px;}
.spaceRight20 {padding-right:20px;}
.spaceBottom20 {padding-bottom:20px;}
.spaceLeft20 {padding-left:20px;}
/</em> --- padding 15 --- <em>/  .space15 {padding:15px;}
.spaceTop15 {padding-top:15px;}
.spaceRight15 {padding-right:15px;}
.spaceBottom15 {padding-bottom:15px;}
.spaceLeft15 {padding-left:15px;}
/</em> --- padding 10 --- <em>/
.space10 {padding:10px;}
.spaceTop10 {padding-top:10px;}
.spaceRight10 {padding-right:10px;}
.spaceBottom10 {padding-bottom:10px;}
.spaceLeft10 {padding-left:10px;}
/</em> --- padding 5 --- <em>/
.space5 {padding:5px;}
.spaceTop5 {padding-top:5px;}
.spaceRight5 {padding-right:5px;}
.spaceBottom5 {padding-bottom:5px;}
.spaceLeft5 {padding-left:5px;}
/</em> ---       --- */

So based on the amount of space I want, I'll add one or more classes from above mentioned classes to my HTML markup and get desired paddings/margins.

Example of usage:---

<

div><img src="img/logoDCSC.png" width="120" height="48" alt="DCSC" />

<

div><img src="img/logoDCSC.png" width="120" height="48" alt="DCSC" />

<

<h2>div><img src="img/logoDCSC.png" width="120" height="48" alt="DCSC" /></h2>

Thanks,
Bhooshan.

[Paulie_D]

I wouldn’t write classes for values if I could possible help it. One you get inot the habit of doing that you could easily end up with hundreds of classes ‘just in case’ that never get used.

I would be more likely to go with percentage based values adjusted for media queries

[Senff]

I’m not in the camp of people who think this is best practice. In my opinion, the name of the class should never be linked to a property.

Let’s say you have that class called “spaceTop15” and it’s used everywhere in the site. Like, dozens of times everywhere. Then at one point, you think 15px is not enough for that class, and you want to give it a little more space everywhere — say 20px.

Would you then change.spaceTop15 {padding-top:15px;} into .spaceTop15 {padding-top:20px;} ? Or would you go through the entire site and replace every single instance of class="spaceTop15" to class="spaceTop20" ?

With the first option, that’s the fast way (and the reason why CSS was made — to change something in one spot and see it change all over the site), but of course it doesn’t make much sense to have a class named after having 15px of padding and then actually have 20px.
With the second option, that’s a lot of work and defies the purpose of having CSS.

Hope that makes sense! It’s an “extreme” example but I hope it gets my point across why a name of a class should be kept separate from its actual properties.

[Bhooshan]

Surely not Senff. I won’t have a class “spaceTop15” and increase the padding from 15 to 20. When I wrote the classes, they were meant for specific paddings/margins for that particular criteria. However; I buy-in to your point where you say the name of a class should be separate from its actual property. In that case, would it make sense to have class names like “spaceTopSmall”, “spaceTopMedium”, “spaceTopLarge” and so on where I can have 5px for small, 10px for medium and 15px for large.

Why I am using these classes is; to avoid putting style element in the HTML markup. For example; many a times, I just want 5px padding to right of an element on a particular instance. If I add 5px padding to the particular element then it gets applied on all the instances where ever the element is used. Instead I just add one more class in the markup of “spaceRight5” and my job is done.

[Andy Howells]

Might be worth checking out SMACSS and reading a bit about to help you figure out a style and methodology for your CSS: – http://smacss.com/

[paulob]

For example; many a times, I just want 5px padding to right of an element on a particular instance.

If this happens often then it may be better to review your design principles as consistency is the key to a more maintainable site. There are of course good reasons for modifying elements depending on situation but a lot of times you can minimise this by carefully controlling the layout from the start.

Why do you need 5px more padding right on some pages and not others? Can you design the layout so that it accommodates both scenarios without needing to change the code? Quite often a small change in design will allow for things to fit nicely together although the content may differ slightly.

Sometimes the above is not possible so a modifying class is required but as already mentioned it would be better not to mention specifics (dimensions or colours etc) so that you can change the values later without making nonsense of the rule. I find that nothing is set in stone and the 10px margin that you thought was fine at the start may look odd when content is changed at some later stage.

I usually find that if I am setting up to many modifiers then there is something wrong with my approach (or maybe with the designers approach e.g. changing the design on every page). The more consistent the design is the easier it becomes to maintain.

[Paulie_D]

Since this is not solving a specific CSS issue..I’ll move it to ‘Other Discussions’

[Author]

Posts