[BNM] CSS Structure [was timesonline - a css travesty?]

[Dan Eastwell]

I always wonder whether or not it's a good idea to group things
functionally, semantically or presentationally e.g. have all the
things that look alike in one declaration/class or separate things
out. e.g. if you have essentially an h2 on one page that looks the
same as an h3 on another page (poor consistency, I know, but it
happens).

I know the idea is to have classes of objects with exceptions denoted
by id, but it's never that simple, and you tend to have many
exceptions.

I also go for context selectors - e.g. if it's in section-3 it'll look
differently, or, if it's a search form in the right-hand column it'll
look different

body.section-3 div.sub-content form#search-form

I guess that's my point -  managing things that

a) do the same thing
b) look similar but do different things
c) look similar but slightly different in a different place on the page, and
d) look similar but slightly different in a different place on the site.

That's a fair few variations to manage. There are probably more that I
can't think off off the cuff.

On 2/28/07, Stewart Birch <stewart.birch at gmail.com> wrote:
> On a related note I'm interested in the structure everyone tends to use in
> their CSS ( now that I've calmed down from a distarous badders game and am
> far less reactionary ).
>
>  I've worked through various methods , setting out the css in globals /
> elements / headers / containers /
>  I also like to keep all the properties in alphabetical order for easy
> reference but placing related properties on the same line.ie:
>
> div#other{
>               border:1px solid #000;
>               position:absolute;left:10px;top:10px;
>              }
> You get the picture...just would like to know of other approaches.
>
> stew
> --
>
> BNM Subscribe/Unsubscribe: http://lists.wessexnetworks.com/cgi-bin/mailman/options/bnmlist/
> BNM info/archives:
> http://www.brightonnewmedia.org/
>
> BNM archive search:
> http://www.roddis.org/bnm/search.php
>
> BNM powered by Wessex Networks:
> http://www.wessexnetworks.com
>


-- 
Daniel Eastwell

Portfolio and articles:
http://www.thoughtballoon.co.uk

Blog:
http://www.thoughtballoon.co.uk/blog