and I wonder if there’s a way to speed them up like Sitepoint explained to me about class selectors.
I rememebr Noonnope saying:
For div.firstimg{…} the browser must:
identify which elements have the class=“firstimg” values
then filter only the div tags from its findings
With firstimg{…} the browser only has to identify which elements have the class=“firstimg” values (1 step).
So I removed all the selectors and it worked great.
So can’t I just change
css: div#content{position:relative;float:left;wid…}
html:<div id=“content”>
to
.content{position:relative;float:left;wid…}
html:<div class=“content”>
I’m not sure what you are asking there but you can use either class or id and the speed should be the same as css works from right to left and the match is made instantly.
.test or #test is pretty much equivalent except that ids carry more weight of course and must be unique whereas classes carry less weight and can be used on multiple elements. A class can do everything that an id can do but an id cannot do everything a class can do as ids are unique and can only be used once. If you wanted you could just use classes for the whole page with no ill effect but you would be hard pushed to user ids for everything because they are not re-usable.
I use ids for main structural elements that are unique in the page (e.g. #header,#footer, #nav, #main, #sidebar); for most everything else use classes unless you know the element is completely unique.
You could just use classes but it makes things more awkward if using javascript. Id’s address an element uniquely and therefore you can find an element easily if using javascript. On the other hand finding a specific element by class name is more complicated because there could be many.
That’s true, but classes may be unique, ids must be unique.
For example for stuff like the header, footer, main menu, etc I would use an id, since those are elements it doesn’t make sense to have multiple of them.