CSS structuring

Two short topics today (see the other one below). This one is about what I wrote about in the beginning of April, how to structure one’s CSS file. Now the more well-known Douglas Bowman has written a post where he explains some of his tricks.

And, as I also wrote in two comments to Douglas’ post, I use Bradbury Software’s TopStyle for writing my CSS, which gives me the possibility to expand or collapse CSS rules by my choice.

Also, one thing I think is missing in CSS is a class-like grouping method. For instance:

div#header{
	a{
		color:#F00;
	}
	ul{
		list-style:none;
	}
}

where those styles above would only affect the elements within a div named “header”. Sounds like a good idea, doesn’t it? 🙂

6 Comments

  • Tommy Olsson says:

    Nesting rules would be a neat thing. Defines à la C could also be useful.

  • Anne says:

    You could also do that with <code>div#header a</code> and <code>div#header ul</code>. Bloating the CSS specification to include this seems a bit overkill to me. Besides, it ain't backwards compatible. (The idea is nice though and has been many times proposed on www-style ;-))

  • Faruk Ates says:

    You don’t need class-like grouping methods, because CSS is cascading and allows for that already:

    <code>#header a {

    color: #F00;

    }

    #header ul {

    list-style: none;

    }

    </code>

    Yes it requires a few more bytes, but the possibility is there and adding nesting to the system will make everything Much more complicated. Good luck trying to get people new to CSS to start using it, then. 😉

  • Robert says:

    Tommy, Anne, Faruk,

    I really would like it, but yes, there would be a backward-compatible problem.

    What I was longing for was something similar to a <code>with</code> statement, so you don't need to type the id of the parent element for every rule (and syntax-wise, to be able to nicely group some certain rules together).

  • Anne says:

    Robert, well, what you could do is build an editor that does something like that. And when you hit save it converts everything to CSS or returns a parse error on invalid input. And everytime you open a document it groups the declarations back together, etc. After all, if it is just for easy editing you might want fix the editing part instead of the CSS specification.

  • Robert says:

    Anne,

    Well, yes, that could be an idea. It's not too much of a hassle writing CSS the way it should be, but class-type structure would be a nice feature.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.