When to Use CSS Classes vs Ids

[@rgirotto]

You are a excelent teacher Steve! Keep that good content going!

[@hondacoding]

Really good explanation Steve, I'm starting to learning front-end and this video was literally helpful

[@arteslola]

Thank you for this video. The information was very helpful and applicable to what I'm currently learning.

[@RichardvanEckTiel]

WoW thanks for explaining this topic so well. 👍

[@jorgeantonio4208]

I always learn with your videos. Thank u very much

[@heic1971]

Hi Steve, I am very new to front end and i ran in to something very weird just wondering if you know who, what, when, and why. I am making a very simple tag and styling it with (hr {border-width: 4px; border-style: dotted none none; border-color: #F1F1F1; width: 15%; margin: auto;} ) on my css. So it looks great, works perfect, no problem. I added Bootstrap 5, and it only read some part from my (hr{}) in my css, it becomes a solid line, even the color is not correct (but border-width:, width: and margin: is correct) it's no longer dotted, and color is not what I selected. I messed around with it for 9 hours to figure it out (i am stubborn, and didn't give up). I tried put in class on my

[@SteveGriffith-Prof3ssorSt3v3]

The problem is most likely the level of specificity in your selector compared to the one in the library. - kzbin.info/www/bejne/gavChGeEoJmkr6s

[@omu_de_la_mare]

turns out I was using Ids really ... really wrong. Thank you profesore!

[@NedumEze]

Good day, Prof. I found this Tutorial today. Thank you very much for it. I was looking for some answers from it. Didn't quite find them. Thought therefore to reach out to you for help. 1) By you, the maxim, "use classes for styling and IDs for Javascript", is not correct? 2) The use of IDs for 'fragments', meaning internal page link and navigation, like, "back to top", is standard. But, sir, often, when you click the link, the page scrolls but often will not stop exactly at the Element with the id="top". Is there anyway to ensure the page scrolls to and stops exactly where the ID is defined?

[@SteveGriffith-Prof3ssorSt3v3]

1 this is a guideline not an exact rule. 2 it is up to the browser how much it scrolls and where it places the element with the matching ID. The guarantee is that it will be on the page. I have a video on scroll snap in css that talks more about that

[@NedumEze]

@@SteveGriffith-Prof3ssorSt3v3 Thank you very much sir. I'll look for the Video on scroll snap.

[@ari_archer]

this is underrated

[@silentstorm8470]

Thank you verry much 👍🏼👍🏼

[@cement006]

cool explanation

[@DanielDuhon]

CSS is the worst lol, thanks for the great video!

[@memesakhie5016]

Thank you!

[@oscarasikoyo1248]

Ids are usually assigned to html elements that will need to be worked on by Javascript

[@zimani7g473]

🎖️

[@kitchentaste8705]

so i got u just say me sir this example is correct or not EXAMPLE FOR ID( THERE IS A WEBPAGE AND I NEED 4 BOXES IN DIFFERENT SHAPES SO LET US ASSUME BOX 1 ISHAPE IS {TRIANGLE} , BOX 2, BOX 3 ,BOXX 4 ARE RECTANGLE,SQUARE,CIRCLE ,SO HERE FOR EVERY SHAPE I WANT TO US EDIFFRERENT COLORS SO I USE DIFFERENT IDS . EXAMPLE FOR CLASS SO SAME HERE BUT ALL THE BOXES ARE RECTANGLE NOW AND NOW RECTANGLES WILL BE IN SECOND PAGE WITH ALSO SO ALL RECTANGLES WILL BE INNN RED IN COLOR AND THESE RECTANGLES WILL BE COMMING IN 2ND OAGE ALSO SO I WE USE CLASS HERE TO GET ALL RECTANGLES PROPRITIES FROM FIRST PAGE.BY USING SAME CLASS NAME IN PAGE 2 WHICH IS GIVEN I THE PAGE1 TO THOSE RECTGANGLES IN PAGE 2 ALSO WE USE CLASS IS THIS EXAMPLES ARE CORRECT PLEASE REPLY

[@waltercampbelle334]

nice

[@damebanda3180]

Noice

[@pandabuddy1655]

Hi Bro. Do you have e-mail?

[@SteveGriffith-Prof3ssorSt3v3]

Of course. Why do you ask?

[@pandabuddy1655]

@@SteveGriffith-Prof3ssorSt3v3 Sorry. I'm o Brazilian Jr Developer self-taught. Do you could be my mentor ? Only a bit.

[@musicNix12345]

Please, stop calling it a CSS class. It's an HTML class. It may seem irrelevant at first, but lot's of people think classes are there only for styling purposes, and that is not the case. Also, classes should not define have an element looks, yet, what it is, its purpose and how it behaves. You should avoid descriptive classes like "red", because red color is a current variable. A button will always be a button, but a color can change every day.

[@SteveGriffith-Prof3ssorSt3v3]

All CSS is about how an element looks. It is a stylesheet language. The behaviour of elements is something that developers have applied. It's an added benefit being derived from how CSS is implemented in the webpage and how JavaScript can access the classes and ids. BEM and SMACSS and OOCSS are approaches built on top of these ideas. Classes are there for styling. The fact that we can do more with them now doesn't change what they were created to do...to separate the styling and presentation from the HTML structure and content.

[@musicNix12345]

​@@SteveGriffith-Prof3ssorSt3v3 But if you create a class named "red" you didn't really separate the styling and presentation from the HTML structure. There isn't really a big difference from deprecated "color" attribute. And although "utility" classes are not forbidden or deprecated, they represent a global modifier which can result in lots of problems, if for instance, only a portion of element using class "red" need to be changed into "blue". It's true BEM uses modifiers, but in a completely opposite way. BEM modifier is tied to an element with a specific class so it act more of as "important" rule than a vague global modifier. So, by being specific, it doesn't create a problem mentioned before. And, the reality is, if you are an experienced in using a BEM methodology, you probably figured out a way to avoid using modifiers at all. IMO, utility and modifier classes do not provide a complete information why some style is applied to an element, and should be used only if it's really necessary and there isn't any other available solutions. It's always better to differentiate variations with descriptive classes like "btn-primary", "btn-secondary", etc..., rather than "red", "blue"... And if for any reason a color has to change specifically on, let's say Monday, appropriate class would be "monday-color".

[@SteveGriffith-Prof3ssorSt3v3]

The separation of presentation and content happens by putting all the style into an external CSS file that can be cached and shared between files. Whatever name you put in the HTML to connect to the CSS file has nothing to do with separation of concerns. I use simple names for classes when teaching basic concepts to new developers. How you name them - to fulfill other purposes in your development work - comes when they start to build much larger JS files and when they understand the relationship between the HTML, CSS, and JS. New developers are wrestling with a lot of new concepts at the same time. They have enough to sort out in their mind. Speaking as someone who has been teaching this stuff for over 20 years, making them worry about the future considerations of a class name when they pick a visual name like "big" or "red" is a waste of their time and mine.