TitleThis wil...">
Geek Answers Handbook

CSS vs vs class

Suppose HTML is:

<div id="header"> <span class="title">Title</span> <!-- more spans and other things here --> </div>

This will work along with nested CSS:

 #header .title { /* CSS */ }

This works of course, but I don't like using the class here. Since I need the title style only once, I would like to use id. But then the name should be something like header_title (since I may have other headers in the HTML), resulting in CSS

 #header #header_title { /* CSS */ }

Now this seems to defeat the goal of nested CSS, then I could just completely abandon the first #header .

I cannot find a way to do this "correctly." Am I missing something, or do I just need to live with some kind of dirty code here?

+7
source share
5 answers

In fact, it does not really matter.

As for your markup, it's that it is readable; HTML is semantic so that your markup represents your content. Thus, if you return to your HTML in a few months without touching it, you can quickly pick up what you wrote :)

Semantically, #header .title makes much more sense to #header #header_title with #header #header_title for two reasons; one, since it’s easier to read, and two, because the purpose of identifiers is, well, to identify! You can use #header_title yourself, but it is much cleaner to limit the number of identifiers you have.

+1
source

Using #id .class {style:rules;} not dirty. This is the right way to do it. Also, if you could have other headers in the HTML, it would be better to use classes rather than rules based on 15 IDs.

+2
source

How to use title tags

 #title h1{/* CSS */} <div id="header"> <h1>Title</h1> </div>

I assume tags exist for :)

0
source

Use an identifier if there is only one element that you want to style, since identifiers cannot be duplicated. If there is a possibility that there may be several elements with a title class (both inside and outside the #header div), then stick to your first CSS example, as this ensures that only elements with a header class will be used inside the #header element. .

It really depends on how your HTML looks and what you are trying to create.

0
source

It seems you are more worried about the naming convention.

It is quite normal to use

  #header #title {/** css **/}

In your case, the best way is probably to use the dirty method.

I'm not sure why you decided to use span over h1, h2, because I would just do

  #header h1 {/** css **/}

since you will most likely only have one h1 tag in your #header

0
source

More articles:


All Articles