guides on css strategy

I'm having to design the UI to a small site, and that means dabbling
in css. I've never been able to get any kind of decent idea as to how
to decide on classes and id-ing. I've had a sniff around the internet
without success: people seem to be as clueless as me. I've even
examined the css/markup of a few sites and it hasn't been
enlightening.

Does anyone know of a good source of info on css class decisions, and
ids? Even better with rails inm ind. Something that broke through for
you might be good. I'm not so interested in how css works: that's easy
to find, and I have a pretty good idea already.

I’m no CSS expert by any stretch of the imagination. However, I do have one bit of advice: don’t name classes based on attributes, such as color; instead, name classes for what they are. For example, don’t create a class named blue_table; rather, create one named line_items, if that’s what you’re presenting.

The problem with a name such as blue_table is that you might change the color to green and the markup to use something other than a table. Then you also should change the CSS class name, but you only have to change it because it’s named poorly.

One of my partners likes the Blueprint CSS framework [ http://www.blueprintcss.org/ ]. I suspect it will serve as a good example.

Regards,
Craig

Thanks, Craig.

A warning about Blueprint: The appeal of Blueprint is in its
outstanding grid framework: less on its naming conventions (it uses
span-1, span-2 etc. as class names, which are NOT semantic, although
very useful)

I find the best way to think of ids and classnames as specific and
generic and nothing to do with style. So If you have one main headline
on a page, it would have an ID of "headline", whereas if you had a
series of articles, you could have a class="articles" ...

... that said, you could also have a surrounding div called "articles"
and refer to the elements inside using CSS selectors.

But as said above: IDs are specific and unique. Classnames are generic
and not specifically related to styles ... the rest is really up to
you!

Paul

Hi,

I'm having to design the UI to a small site, and that means dabbling
in css. I've never been able to get any kind of decent idea as to how
to decide on classes and id-ing.

IME, the decisions you'll need to make will depend on the nature of the
site, especially as it relates to the volume of Javascript you'll be
using. The HTML / Javascript / CSS interdependencies can get to be
quite a bit to manage. Like you, I've been unable to find what I would
call a usable set of guidance. Here's what I've come to.

We've got three 'identifiers' to work with: id, name, and class. CSS
uses id and class. Javascript uses id and name. So, to keep the issues
as separate as possible, I try to avoid using id for CSS. The problem
I've run into is that it's difficult to decide what 'class' a thing
belongs to until you've got lots of other things to compare it to. So
what I'm ending up doing in actual practice is to initially use id to
style elements as the UI emerges, then refactor to classes as the site
comes together. It's turning out to be a non-trivial exercise.

HTH,
Bill

Huh?? JavaScript offers various ways to access elements of the
DOM, and 'class' is certainly one of them. Can you be more specific
about what "issues" you're trying to "keep separate"?

And if you have *one* of an element that needs styling, why not use
an ID to target your CSS?

Hassan Schroeder wrote:

We've got three 'identifiers' to work with: id, name, and class. CSS
uses id and class. Javascript uses id and name. So, to keep the issues
as separate as possible, I try to avoid using id for CSS.

Huh?? JavaScript offers various ways to access elements of the
DOM, and 'class' is certainly one of them. Can you be more specific
about what "issues" you're trying to "keep separate"?

And if you have *one* of an element that needs styling, why not use
an ID to target your CSS?

--
Hassan Schroeder ------------------------ hassan.schroeder@gmail.com

To add a couple of point to this: First the name attribute is deprecated
because it turned out to be a mistake. It server the exact same purpose
as id and it redundant. Secondly, any sane person uses something like
jQuery or Prototype, which access elements in the DOM using CSS
selectors. So the trend is to try to bring JavaScript and CSS closer
together and not to separate them.

So given that there is not three identifiers there is just one, which is
id. The class attribute does not identify a DOM element. It identifies
the styles to apply to the element. Notice I said styles (plural).

This is perfectly legal:

HTML fragment

To add a couple of point to this: First the name attribute is deprecated
because it turned out to be a mistake. It server the exact same purpose
as id and it redundant.

Actually not redundant in forms -- e.g. radio button elements can
be grouped by a shared name /and/ have unique IDs -- but...

So given that there is not three identifiers there is just one, which is
id. The class attribute does not identify a DOM element.

No, it doesn't identify a *unique* DOM element, but ...

Notice that all id attributes are unique on the page and are used to
identify DOM elements. CSS class names describe the styling and are not
used to identify the DOM elements.

..e.g., you mentioned Prototype, which provides a convenient
getElementsByClassName() method which identifies a *set* of
DOM elements. :slight_smile:

Hi Hassan,

> We've got three 'identifiers' to work with: id, name, and class. CSS
> uses id and class. Javascript uses id and name. So, to keep the issues
> as separate as possible, I try to avoid using id for CSS.

Huh?? JavaScript offers various ways to access elements of the
DOM, and 'class' is certainly one of them.

I probably should have said JS libraries, specifically the Prototype /
Scriptaculous libraries, which is what I was thinking of. I think it's
accurate to say that in those libraries, identification via id / name
predominates.

Can you be more specific
about what "issues" you're trying to "keep separate"?

My focus at this point is refactoring an Ajax application. My CSS has
gotten out of hand size-wise, primarily as a result of using id to
identify elements. As I refactor back to classes, every modification /
elimination of id in the html requires examination / testing of the JS
to make sure I haven't eliminated a needed reference. The same isn't
required when making changes to classes.

And if you have *one* of an element that needs styling, why not use
an ID to target your CSS?

Absolutely agree. The OP asked about guidelines. Just trying to
communicate what I've found helpful. Sorry if I struck a nerve.

Best regards,
Bill

I probably should have said JS libraries, specifically the Prototype /
Scriptaculous libraries, which is what I was thinking of. I think it's
accurate to say that in those libraries, identification via id / name
predominates.

Sure, but...

As I refactor back to classes, every modification /
elimination of id in the html requires examination / testing of the JS
to make sure I haven't eliminated a needed reference. The same isn't
required when making changes to classes.

..that's not true if you use getElementsByClassName to gather up
collections of elements to operate on -- or maybe I'm the only one :slight_smile:

Absolutely agree. The OP asked about guidelines. Just trying to
communicate what I've found helpful. Sorry if I struck a nerve.

Nerves? What nerves? All my nerves are currently committed to
dealing with the JRuby on OC4J installation I'm inheriting :slight_smile:

No, just wanted to make the point that class names in HTML can be
equally useful for identifying JS objects -- obviously a YMMV area!

H*

We've got three 'identifiers' to work with: id, name, and class. CSS
uses id and class.

CSS also uses element's name itself and can use variuos combinations,
descendants etc.

Javascript uses id and name. So, to keep the issues
as separate as possible, I try to avoid using id for CSS.

Popular JavaScript libraries let you use CSS selectors, so whatever
you use in CSS to target elements works in JS too (and even more,
because sometimes library can provide more methods than browser
has implemented for CSS).

The problem
I've run into is that it's difficult to decide what 'class' a thing
belongs to until you've got lots of other things to compare it to. So
what I'm ending up doing in actual practice is to initially use id to
style elements as the UI emerges, then refactor to classes as the site
comes together. It's turning out to be a non-trivial exercise.

That sounds strange. Maybe you just lack some practice?
Two things to remember: IDs must be unique on the page, and
you do not necessarily need classes (or id's for that matter) at all,
there are other means to target elements.
Lets say you want to target LI elements in some UL. You don't
have to provide them all with classes or ids: just give some id to
UL and then you can specify your LIs using "#myulid li"
Likewise, to target paragraphs which got just after header you don't
need to use id or class: "h2 + p" will work just fine.
It is definitely worth spending some time with http://docs.jquery.com/Selectors
- good grasp on these will help to simplify your code.

Regards,
Rimantas

Hi,

> The problem
> I've run into is that it's difficult to decide what 'class' a thing
> belongs to until you've got lots of other things to compare it to. So
> what I'm ending up doing in actual practice is to initially use id to
> style elements as the UI emerges, then refactor to classes as the site
> comes together. It's turning out to be a non-trivial exercise.

Maybe you just lack some practice?

Without question.

I responded, with what I'd point out was not positioned as a
recommendation, because I share the OP's experience having difficulty
finding clear, easy-to-follow guidelines WRT 'best practices' that lead
naturally to an easily maintained / modified, coherent set of CSS files,
Javascript files, and HTML produced by Rails code. Links are always
appreciated.

Best regards,
Bill

But *only* for the above listed elements, NOT for e.g. form elements
like INPUT.

I had the same question when I was starting out with CSS. A lot of is
simply trial and error, and you figure out what is best. Buy a good
book on CSS (I read Bullet Proof CSS design), and that will give you
some guidance as to what's the best class/id naming style. In general
I follow these rules:

1. Use ID for unique element.
2. Use class for shared elements.
3. Scope CSS selector properly, so it's as specific as possible. It's
a terrible thing to work on a code base where the previous developer
specified style on something generic like ".first", then everything in
the site that is of class "first" would be impacted by this style.