Who will win? IDs or classes?
We may be able to answer this question by looking at the context, and the differences between each one.
Let’s jump ...
For further actions, you may consider blocking this person and/or reporting abuse
You forgot to mention "!important".
I had an issue just last Friday when I was trying to apply some style to an element. I needed a display none but the code was being ignored.
I could see the
style="display: none"in the code in devtools but the element was still visible.I was also under the impression that inline css overrules all. But not if there is an
!importanton the css property value.The bootstrap class
d-flexadds adisplay: flex !important. I imagine there is a good reason they added the important, even though that is something you should avoid, if you can.In summery
!importantoverrules everything independent of where it is applied! Something to keep in mind!Oh yes!
I totally agree with you, you should use it only in specific cases, and don't overuse it.
This Stack Overflow question got great answers on the topic.
Also MDN has some rules of thumb to know when to use !important.
Thanks for pointing it out!
Nice one,
You said inline styling is bad, but if there's a situation you just need to apply just a style to an element do you need to create a new class for it...
IDK if you get me!
You mean, when there's only one CSS rule to add to the element?
That means that your project is small. But it will grow.
Imagine that you want to add more styles one day, then you end up with a bunch of CSS inside your HTML... that's not easy to read, and also when working on your CSS file you may forget those inline styles, ending in a situation where you are asking yourself: where are these styles coming from!?
Also, if you add more inline styles you won't be able to reuse them.
It is simply better to have all the CSS on a different file, therefore you will avoid spaghetti-code and you are keeping the specificity levels low, so you will be able to solve conflicting styles better (without using !important).
You never know when your project will grow, and even if not, it's better to get used to good practices since the beginning of your career. So you won't be fighting against yourself when working on bigger projects.
Hope it helped :)
Thanks for your great comment..
Yeah, It helped..
But Is there anything for giving CSS class name or what to consider when giving class name for a project...
Yes, here you have a freeCodeCamp post about BEM (Block-Element-Modifier). It's not really easy to use, I recommend to practice with it and you'll finally get used to it and know how to use it properly.
That's the most common thing when writing CSS classes I think.
SMACCS talks about naming conventions on CSS classes too, but it's not the main focus of the book.
Anyways, there are some others like ABEM and OOCSS. I didn't try them though.
PS: I forgot to say, if you work with Bootstrap, or something alike, you will use the predefined classes that come with it.
If you are testing a fix you don’t need inline styles, test the fix in the browser.
But When if I needed to apply the fix to the element.
Let's say you element is a link inside the last
<li>inside an<ul>with the class 'nav'. Then you can target that element in your style sheet using.nav li:last-of-type a { ... }You don't have to use a class to target an element.
Thanks so much, for this eye-opening technique which I don't take note of.
ID is identifier of one object in document. Class is a category.
Resourceful!!!