Because Pinegrow and coding with it is still quite new to me, I wanted to ask the following simple question:
What is the best / common way to work with inline CSS / classes / IDs?
When I want to use a style on several objects, I use classes.
But often I style objects that only appear once on a website. Is it better than to use an ID? Or does it make sense to create a class for them? Or is it better to just use inline CSS? I heard that you shouldn’t use inline CSS because it makes the site slow…
Hi @Riccarcharias,
The only other thing to keep in mind when using ids for styling is that they have a higher specificity than classes, which can be good or bad. If you have something like:
#carousel-1 {
border: solid 2px green
}
It would over-ride:
.carousel-border-red {
border: solid 2px red
}
This can either be the desired behavior or trip you up. Just something to keep in mind.
Cheers,
Bob
Hi, this explains it quite good.
it covers @RobM explanation of specificity and also points out the good times to use ID.
Anchors internal page links and sections, or when you have one particular thing that needs to be different from all the other things that use the same classes… but
in that case… you COULD just add another class to that thing, which is also more specific to that element, thereby making that ID case redundant.
and… you cold also reuse that class somewhere else.
If it was an ID, related stying you couldn’t.
since ID can only be used once, as you already know.
So Less code redundancy.
But basically as a general rule of thumb… dont use Inline Styles, no real reason too, unless rapidly prototyping…but even then, if your happy with the result, you then have to go over the same code again to REMOVE all the styling to a more sensible source yourself (preferably external stylesheet, followed by the next option of having all the styles in the head of your page
because otherwise, you have to sift through your web page code to find and change styling.- or use search and replace tools.
But then Tailwind etc… use inline utility classes…everywhere, lots of them…er ok.
So that blows that out of the water… but, TW implementation seems a little Retro to me.
But I have hardly used it, for that very reason, so others here could probably give more informed answer on the logic of that.
Thanks for your answer. That means that classes are the way to go - even if I have a unique element where I need to create a class assigned to just one element…
Bingo!
Yes, seems screwy logic,when youve gone to the trouble to learn them, but that was the approach taken with Chris Coyer, web guru on his site,some time ago.
The answer is best broken down to “why” and “when”:
Why
Best practices are to use class definitions in a separate CSS file provide the greatest consistency, flexibility, and reusability.
When
Since ID attributes will only apply to the first instance on a page, use them only when greater specificity is needed. Afer all, it’s the same amount of work to create an ID definition as a class definition and the creative process involves discovery. Be prepared for what you didn’t expect.
Use inline styles only for prototyping and troubleshooting.
A final note
Original HTML was a production nightmare: nested tables and only inline formatting. Inline styles are a giant step backwards, especially on a production website. “Retro” can be cool but save it for your visual design.
Inline styles only benefit the person typing the code now and create trouble everywhere else in the design and production of a website.
The use of CSS classes benefits your site visitor with a consistent experience, your visual designers with control over presentation, and your frontend developers with ease of maintenance.
It’s really something to keep in mind