Solved

Div ID Selectors or CSS classes for Layout

Posted on 2012-03-24
5
451 Views
Last Modified: 2012-03-24
I've been using ASP.NET and CSS for Layout for a while now, but am not sure whether to use CSS classes or id selectors as the main means of controlling layout and style. For a while I've used mainly id selectors, but now I see there seems to be a trend towards CSS classes.

I guess the real question is when to use id selectors, and when to use classes. They both have their purposes, but it's easy to fall into using mainly one or the other. Microsoft samples seem to be using mainly classes these days??
0
Comment
Question by:mitdaniels
  • 2
  • 2
5 Comments
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 166 total points
ID: 37760142
'id's are supposed to unique on a page so that javascript can find the one and only instance of that id.  Classes are meant to be more general to be used where ever they are needed or wanted.

http://www.w3schools.com/css/css_id_class.asp
0
 
LVL 25

Accepted Solution

by:
Rouchie earned 334 total points
ID: 37760241
To build on DaveBaldwin's excellent answer, and give you an example, use ID's on elements that occur once - so - a navigation bar might only appear at the top of the page, so that could have CSS applied via ID.
Another example might be a footer <div> containing copyright message.  It only appears once at the bottom, so ID could be used there too.

However, as you are aware, the above could use a CLASS instead.  It makes no difference really.  When using Javascript to locate elements (e.g. to perform functions on elements using JQuery, e.g. hide/show a footer based on a condition), finding elements by ID values is much faster than by class.  Therefore, by using CSS with ID, developers avoid having ID and CLASS together for certain elements.

Hope that helps.
0
 

Author Comment

by:mitdaniels
ID: 37760754
Thanks for the comments.

Therefore, by using CSS with ID, developers avoid having ID and CLASS together for certain elements.
Are you saying that we should try not to use ID selectors and classes together for the same DIV or element?
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 334 total points
ID: 37760979
If you can avoid it, it just makes for easier maintenance and makes the code easier to read and/or debug
0
 

Author Closing Comment

by:mitdaniels
ID: 37760992
Thanks, just what I needed.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now