Ola! So, this is something I've just come to a realisation recently and if you're a newbie in the world of web development then it's easy for you t...
For further actions, you may consider blocking this person and/or reporting abuse
In my early days, my mentor and my boss taught me 2 specific things:
7+ years down, I still find those tips helpful in every project!
Happy Coding ❤
why for #2?
Adding on Aziz answer :
If for examble you use
h2.nice-heading { color: red; font-size: 69px; }, but later on another page you want to style an h3 the same (you have to put anh3to follow the hierarchy of content, but you would like to have the same style) you cannot use your class.nice-headingcause it is not anh2. Your selector would be over specific.You should simply do a class
.nice-headingso you can then apply it to any element you want.In fact, this should not happen or very rare. Same thing should be extracted to be a single component which can be used anywhere. The big con of this is, after CSS bundled, and some part of CSS could be affect by another piece of CSS, you have to add a lot of dirty stuff to fix, like !improtant
Depends on you tech stack indeed... But i'm more talking about a classic vanilla (no web component) setup with some naming convention like BEM or CUBE.
Also my example is just an answer to a prior question to demonstrate that you should not use uselessly specifics selectors like
h1.nice-headerordiv.box.PS: improtant is not a word ;)
No, rather than using !important, I tend to control specific/scoped styling via parent hierarchy.
Its not like I create everything generic. However, trying to keep everything modular is my main goal. When I get the design, I study it thoroughly so that I can figure out which styles needs to be generic, modular, single use or limited.
And yes, recently I got a change to work with tailwind and because of my usual practices, I kinda loved it (but only with Next.js or similar frameworks! 😅)!
Because its irrelevant and loses its reusability. I tend to write modular styles so that it could be reused anywhere without dependency of the element. So I either use tag to style the element or class, never both.
you are creating tailwind stuff. that is fine. but i don't think h1.some-class is the case.
Now let's talk to Tailwind users... :-D
With WAI-ARIA, you can utilize the
roleattribute to style the elements. For example,a[role=button]instead ofa.button,div[role=alert]instead of.alert, etc.I definitely agree that you shouldn't ever use an ID (reserve these for JS hooks or anchors - their specificity will make it harder to overwrite in the wild).
For me, pseudo selectors are mainly useful if you're trying to style something where you don't have control over the markup, or if the rules you're imposing would still work should the elements themselves be reordered or changed.
For example, an unordered list you're using to display some navigation, and the last item needs to have no margin, regardless of if the navigation order changes.
If in this navigational example, you wanted to highlight the 3rd item (due to it's content, not simply because it's the third item), I'd recommend adding a modifier class - this future-proofs your CSS in case the order changes, or if you later wanted to highlight another item you could just add the class elsewhere.
Pseudo classes are a great trick to give you more power over your lists and flex items, but it's no substitute for a good class naming convention and structure (check out BEM or SUIT CSS if you've not already).
Happy coding!
Title: Stop Using IDs and Classes in Every HTML Element!
Example given: consists of 5 classes
Me: whhaaat?
"xD" Yea , me too
What if I told you this example only needs one class, if even that? 😉
you can elaborate :) I am all ears for suggestions
for the one class approach, or just an element selector if you want no classes at all.