Creative Jar Blog RSS Feed

CSS : .class vs #ID

February 14, 2008 11:38 by tim

What, if any, are the advantages of using CSS for ID'd controls as opposed to using class based CSS?

I, for one, prefer classes.  Being predominently ASP.net, I have to tackle the old #include method using MasterPages and UserControls.  The way ASP.net renders HTML in this fashion causes controls to be ID'd up in GrandParent_Parent_ControlID so as to ensure uniqueness of controls.  This works and allows UserControl to have a textbox, for example, to have an identical ID to a textbox in a MasterPage, each of them are able to access their individual controls in their own code, but allowing the page and it's client-side code to access each of them on the same page

This kinda throws ID based CSS out for me as i cannot guarantee what my controls will be called until I compile and run the application and look at the markup that is generated

Anyone have any thoughts on which approach works better for them?


Currently rated 4.0 by 1 people

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , ,
Categories: Design | Technical
Actions: E-mail | Permalink | Comments (5) | Comment RSSRSS comment feed

Related posts

Comments

February 15. 2008 09:26

Interesting! There are two opposing arguments:

CSS Developers/Designers(?) like to use ID's for setting position and also enables the CSS to be easily directed at certain HTML tags.

As you have said in your post .NET Developers require CSS based on CSS classes, as ID's are a no-no.

The answer is pretty much a combination of both. Let the CSS drive the template using static HTML tags and ID's. Within the template, use CSS Classes and generic styles to style ASP.NET controls.

Coding CSS for a .NET site is very different to creating CSS for a static HTML site, and is a required skill now-a-days for all CSS Developers/Designers(?).

Do you code in CSS or design in CSS???? I think it's design.

gareth

February 15. 2008 09:53

CSS has syntax and affects visual elements in a programatic fashion, so i say it's still coding

Call it CSS development and that covers both sides :¬)

tim

February 15. 2008 10:02

It would be helpful to take this back to the roots. The differences between Classes and ID's.

An element can only have one ID.
An element can have multiple classes.

All ID's on a specific page must be unique.
Classes are not unique at all.

With regards to nesting your css. eg #wrapper #left #menu .list
You'll need to just use a bit of care when doing it. Problems can arise when you have generic class names like 'left'. If you don't nest these inside their parent object it could cause problems later on. Especially if the project is handed on.

Looking at a large scope. If you have one css page for an entire site, like most things, you'll need to think about styles being inherited on completely different pages. The easiest way to get around this is to give the <body> a specific id for each page. Then any style specific to that page can just be prefix with the id so you can be sure they won't be applied to any other pages.

This comment is pretty bitty but I'm just streaming it from my mind box.

An example of 'The ultimate css' would be:
/*--sitewide style*/
/*These are all about positioning. Shouldn't see any font:family's or anything in these.*/
/*(text-align is ok but only if it's being used for layout*/
# wrapper
# left
# main
# right

/*--SiteWide Formatting*/
/*To give the site a more connected feel. make all the text stuff global.*/
body {font-size:;font-family: etc etc}
p, b, a, h1, h2, h3 etc etc.
/*You could use things like h1.dotted but you might aswell just use h1-h6 or whatever.*/

/*Page specific formatting*/
/*This stuff is split into blocks of page formatting. All styles prefixed with the ID of the page*/
/*These can include both layout and font stuff depending on your needs.

And that's pretty much it.
Last note: When using css hacks for naughty browsers (ie6,7,etc etc). I tend to put them right next to the styles they are hacking to make it easier to see all the styles that apply to each element.

matt

February 15. 2008 10:32

aye, it's a bit cludgy for .net with regards to the body of each page having an ID. when using master pages, that bady tag will be common to all pages which inherit from the master page so you'd need some kind of logic to change the body's ID to something specific for that page

Also, here's a funny post about the differences between CSS designers and developers lol

cssglobe.com/.../what-would-you-rather-do-design-or-code

tim

February 18. 2008 00:58

I agree with Matt, ID's should only be called once and classes are called multiple times. This is one of the fundimental parts of CSS.

Clients are jumping on this "Web 2.0" seeking sites that have accessibility and search engine optimisation. This is where a reset sheet could come in handy making cross browser support less of an issue.
See Eric Meyer's reset sheet for example: meyerweb.com/.../reset-reloaded

Using this the developer can then use ID's and classes more semanticly by moving away from the "#left, #main and #right" type of styles. The semantic approach is to use a more intuitive naming convention, not to only make it easier to hand projects on but also for search engines to pick up on keywords within the mark-up. The name of the element should refer to its content!

I found a detailed and interesting article on semantics which should be fav'd! This covers a lot of fundimental points which a lot of coders get wrong out there!
blog.tn38.net/.../what_are_semant.html

Semantics: Relation between signs and the things they refer to, their denotata.
Quote from: http://en.wikipedia.org/wiki/Semantic

I recently come across this link to the w3c semantic data extractor:
http://www.w3.org/2003/12/semantic-extractor.html

rob

Add comment


 

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

January 6. 2009 08:52

Calendar

<<January 2009>>
SuMoTuWeThFrSa
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567