[BNM] CSS Structure [was timesonline - a css travesty?]
Antony Jones
antonyj at gamesys.co.uk
Thu Mar 1 10:17:39 GMT 2007
> 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.
>
The funny thing here is, if you do as I do, and design all your sites
with EMs, you can't put font-sizes on objects which have sub-objects
(because it changes the size of an EM for everything within that object.
SO you have to enclose things with pointless DIVs called 'format' or
similar, and apply sizing to those divs alone.
Which means that I have to use a lot of cascading in my stylesheets.
It's incredibly confusing.
And after all that effort, Royal Bank of Scotland managed to wreck it
all anyway:
https://secure.nignetwork.com/home.do?menuId=1
(hint: scroll your mouse down so the site gets smaller - look at those
b*&^E$% banners!!)
:(
Antony Jones
Developer
Gamesys Limited
e: antonyj at gamesys.co.uk
t: 0207 478 8103
a: 1st Floor, 54-62 Regent Street, LONDON, W1B 5RE
> -----Original Message-----
> From: bnmlist-bounces at brightonnewmedia.org [mailto:bnmlist-
> bounces at brightonnewmedia.org] On Behalf Of Dan Eastwell
> Sent: 01 March 2007 09:58
> To: Brighton New Media
> Subject: Re: [BNM] CSS Structure [was timesonline - a css travesty?]
>
> 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
> --
>
> 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
More information about the BNMlist
mailing list. Powered by Wessex Networks