Wrapping ID's in CSS Classes?

Question

Hi Guys,

I am relatively new to CSS and wondering whether its possible to "Wrap" ID's so you don't have to repeat them over and over ?

i.e.

#home
{
some stuff
}

#home .header {
some stuff
}

#home .sub_header {
some stuff
}

Is it possible to "wrap" the .header and .sub_header so I don't have to keep repeating #home all the time ? i.e. something like this so the ID can collectively wrap the classes?

#home
{
some stuff
}

@#home [

.header {
some stuff
}

.sub_header {
some stuff
}
]

Answer 1

Excellent question! This is not possible with native CSS I'm afraid. There are no real short cuts to take.

If you work with a lot of CSS, there are pre-compilers that allow you to use enhanced notation, and convert it into CSS on the fly.

There's for example

• xCSS it can nest child elements.

• Then there's LESS, it's written in Ruby so you need that installed (as far as I understand, I haven't used it myself yet) but it's perfectly suitable for editing CSS in any environment. Check the "nested rules" section on the front page.

If you are just getting started with CSS, you may want to stick with the native notation first, though. But the moment it gets really tedious, those tools are a great help.

Answer 2

Unfortunately this isn't possible in just CSS, you can however achieve this using CSS generators such as LessCSS which have their own syntax and have features like nesting and variables.

Answer 3

Another great CSS framework is CSS Scaffold

CSS Scaffold is powered by PHP, is easy to use

• allows deep selector nesting
• constants
• custom mixins (reusable pieces of css code)
• implements a grid creation framework
• caching of already parsed css files for production (+minify)

If you are not coding a big site, I would still recommend plain css

Answer 4

If you use PHP, consider using lessphp (http://leafo.net/lessphp/docs/), or http://www.symfony-project.org/plugins/sfLessPhpPlugin for symfony