CSS - Class hierarchies???

Question

Hi,

I have a site with a customer front end, which has a catalogue, homepage, contact page, about us page and so on. There is also an administration front end. I would like to implement a kind of hierarchy where any elements within an element with class "admin" will inherit properties set in the admin stylesheet and anything else inherits from the customer stylesheet. The purpose of this is so that admin can login on the admin front end, where they have access to lots of advanced stuff, but they can also navigate to the customer front end where they can execute basic tasks (such as hiding catalogue items, running a debug script if a customer reports an issue and so on). I would like all the admin tools on the customer front end to have properties taken from the admin stylesheet instead of the customer one - this will change the background colour and stuff.

Is there any easy way to set up like namespaces to make things simpler, for example:

.admin {
    .list {
        .list-subtitle
        {
        }
        .list-item
        {
        }
    }
    a
    {
    }
}
.customer
{
    .list
    {
        .list-subtitle
        {
        }
        .list-item
        {
        }
    }
    a
    {
    }
}

I know it can be like:

.admin .list {}
.admin .list .list-item {}
.admin a

I just dont want to have to keep putting .admin all the time.

Does anyone have any suggestions on how I could do this? I suppose I could write a .net class which sets this up and writes a stylesheet according to whats put into it, but then I would not be able to read the styles so easily add there would be all sorts of like Classes.Add(blah) and so on.

Thanks in advance for any replies...

Regards,

Richard

<ul class="customer">
    <li>Will appear as a customer control</li>
    <li>Will appear as a customer control</li>
    <li class="admin">Will appear as an admin control</li>
</ul>
<div class="customer">
    <ul class="admin">
        <li>Will appear as an admin control</li>
        <li>Will appear as an admin control</li>
        <li>Will appear as an admin control</li>
    </ul>
</div>

Basically, as you can see, I want any element with class "admin", or within an element with class "admin" to appear as they would on the admin front end. Otherwise they appear as they would on the customer front end. This may also be used the other way around too so administrators can preview what they have entered before submitting it to the database, as it would appear on the customer front end.

If namespaces were allowed in CSS this would be no problem - unfortunately something like Less seems to be my only option to achieve this easily. (I say unfortunately because I have never used it before and I am on a very tight timelimit for this - I have nothing against tools like Less!).

Regards,

Richard

Answer 1

There's no native CSS way, but you could use something like LESS which will allow you to write it like that and compile it into real CSS.

There's HSS too, which also supports nested rules like the ones you specified.

Answer 2

Have you looked into using Less CSS or SASS?