What's a CSS best-practice— id/classes or selectors?

HTML & CSS
1

Hello,
So, I have PHP require a stylehseet on submission of a form to style the results of submitting that form.

In that stylesheet, what is a best practice— to use selectors or IDs / Classes to style the new page created by PHP ?

The HTML elements are pretty much the same, just the style of the two pages is different. Should I add classes to the HTML elements so that the newly added / required stylesheet can apply styles to those classes or should that new stylesheet use selectors to style the page; thus, keeping the HTML simpler?

2

You can differentiate the same HTML to be styled two different ways by adding an id to the tag wrapped around all the content eg <body id=alternate">

3

The original question hints at a misunderstanding of the role of ID’s and classes; and what selectors are, so I’m going to review that.

First off, classes and ids are selectors. CSS has the following selectors for finding the elements of an HTML document.

  • Tag You can select elements based on their tag. The tag of an element describes its overall purpose, may have attached functionality (especially if its a form element), and has default styling.
  • Class You can assign one or more classes to elements in order to style all elements with that class in a similar manner, or group the elements in one or more of a myriad ways.
  • id You can assign an id to an element to uniquely identify it. No two elements on a page should share an id.
  • psuedo-class A psuedo class allows you to identify an element based on its relational properties to other elements. Even or odd, first child, and first of type are common psuedo classes. There are also two psuedo classes for tracking user interaction states - :hover and :focus.
  • attribute You can style against element attributes on newer browsers

CSS also has a number of selection operators. For example “>” means ‘immediate descendant’. So “body>div” will style only the divs that immediately descend from the body tag.

Getting back to the original question, it’s very odd to include a new style sheet after form submission. Most sites typically only have a few style sheets, many only have one, and all the styling is included and loaded once. The PHP then would apply classes to the elements that need to have a styling change.

4

Thank you for explaining all that.

Yes, I learned that it is odd and I just added the styles to my normal stylesheet instead of linking a new one of form submission.

However, I did learn from this thread— thank you.

5

Sorry to be chiming in late, but it is a good question so I hope my two cents will still be useful.

In addition to what Michael said, consider the sum total specificity of any selector combination.
#el{} you should never have to get more specific than this, if you do it’s because you painted your self into a corner.

ID and classes can be used sparingly. If you can select something via tags, do so. other words add a class to differentiate rather than label.

For example:
Old IE issues aside, I would rather target the first element in a list by overriding a rule rather than giving it a class, if I can get away with it

li{ color: red; }
li+li{color: pink; }
the first item in any list have red text, subsequent items will have pink text. and you didnt even have to add a class to the mark up.

but let say you wanted the current item in green. Well the only way to know what the current item is is to label the element… adding class=“current”

so then .current {color: green; }

BUT what if there are other corrent “things” in the page… for example there is a .current menu item but the page also displays a series of articles (divs containing paragraphs), the which you want to be orange.

.current {color: orange; }/* the PARENT element (eg the div) has to have a class of ‘current’/
li.current {color: green; }/ the current li has to have a class of ‘current’*/

this woks because the the second rule has more specificity and so OVERRIDES THE FIRST and note how you dont have to go adding classes or ID to every tag since rules cascade.

I hope that helps.

6

Uhm, what if javascript can toggle the element’s state? So

#el
#el.active

In general though, that is an accurate assessment.

7

MM, I meant styling wise.

When you see this in CSS then the coder got painted into a corner: #ID .class #otherID{}. if you have an element with an Id you should not NEED to target it WITHIN A PAGE OR STATE via it’s parent’s selector is what i was trying to say.

I said within a page or state because:

you can chain classes to an ID, very useful when scripting FUNCTIONALITY via .js ( nice one M.M.)
AND
within a site you can restyle the element by letting it be a CHILD of another class or ID (but class is preferable)

Example:
#el {general styles}
.homepage #el {background:#000; color #fff}
.inside #el {background:#fff; color #000}

then give the body class=“homePage” , “inside” , or no class as required.

In general what I am trying to convey to the OP is that rather than thinking of targeting by tag, class or ID, think targeting via specificity; choosing from lower specificity to higher as specifically required (pun) for the page>site beign coded. BTW it is also good practice to order your stylesheet (or style sheet segments), putting your more general selector(lower specificity) towards the top of you stylesheet and the more specific ones toward the bottom.