Question

I have a problem here that i can’t seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i’ve decided to learn it properly and i’m trying to categorize things as much as i can.

So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.

Now i have a class for each of these containers, they can be called container_1 container_2 and so on.

Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.

So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn’t work.

So where am i going wrong with this?

This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.

http://jsfiddle.net/ragebunnykickass/g3Zaz/

The naming is a little different but you’ll know what is meant.

Thanks.

Answer 1

CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:

.rounded-corners
{
   /* Your CSS to define rounded corners */
}

Note that you define ONLY the properties for rounded corners. Now let’s say you have a class to style containers (for example with a proper padding):

.container
{
    /* Your CSS to define a nice container */
}

How to combine them together? This won’t be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:

<div class="container rounded-corners">
</div>

Now suppose you need rounded corners for a non container object:

<div class="rounded-corners">
</div>

This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.

NOTE: to summarize: answer is yes, you may have to repeat some code. You’ll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you’ll see you missed the point to separate content from style (because in HTML you’ll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.

It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It’s implemented as a JavaScript that will parse your CSSs. Of course you won’t write a pure valid CSS but you’ll gain many new features. In your case you may find mixins are what you need:

.rounded-corners
{
    /* Your CSS here */
}

.float-left
{
    /* Your CSS here */
}

.container
{
    .rounder-corners
    .float-left
}