How selective should I be when choosing selectors for CSS?aliceytBlockedUnblockFollowFollowingMay 10The right answer is to be really selective so that you have an easier time when adding styles and maintaining your CSS stylesheets down the road.
Randomly picking selectors and making adjustments throughout your CSS and HTML to match your mockup can seem to be the most direct way of writing CSS.
However, when you have to deal with a lengthy stylesheet, you can easily confuse yourself.
You may even find yourself cluttering your stylesheet as you write more codes to correct the styles you added before.
Rather than get yourself in a quandary, I find that it is better to start coding your CSS by knowing what selectors you can use, and being mindful of the selectors that you use.
TypesTypes are the most convenient way of picking a selector as you don’t have to remember what you named the element in your HTML and you don’t have to add extra symbols in your stylesheets, unlike classes and IDs.
Because they are on the lower end of specificity, you can overwrite their existing styles if you need to apply styles to some but not all of the types by choosing selectors of higher specificity.
Select types if the styling is something generic to the particular type.
Examples of types:<html>, <body>, <div>, <h1> etc.
Pseudo-elementsPseudo-elements is a keyword added to a selector to style a specific part of it and you can only have one pseudo-element in a selector.
When using pseudo-elements,:: needs to be used.
In terms of specificity, it is on par with types.
Select pseudo-elements to style a specific part of the selected element(s).
Examples of psuedo-elements: ::first-lineClassesYou can use classes to apply a style on a group of elements.
When using classes, a .
has to be added before the class name in the stylesheet.
Classes are like the middle child of selectors, between type, the big brother and id, the younger sister, in the specificity hierarchy.
I tend to go with classes over IDs as I may only have one element that requires a specific style but that may not be true in the future.
To get a sensing of the names that other developers used in their code, you can visit your favourite website and open up the developer tools on your browser by pressing Fn + F12 on your keyboard.
After which, click on the Elements tab to look at the code.
Select classes if you intend to apply styles to multiple elements.
Examples of classes: .
main-header, .
main-message etc.
Pseudo-classesPseudo-classes are used to apply styles to a particular state of element(s).
They are on par with classes when we look at specificity.
Select pseudo-classes to apply styles to a particular state of element(s).
Examples of pseudo-classes: :hover, :checked, :active, :nth-child()Attribute selectorsAttribute selectors are used to style HTML elements that have specific attributes or attribute values.
For instance if you have an active button that you want to style it differently from an inactive one, you can use an attribute selector.
Select attribute selectors to style HTML elements that have specific attributes or attribute valuesExamples of attribute selectors: input[type=”text”], button[disabled]IDsIds are used when there is a unique element that you want to style.
Ids are also used for non-CSS purposes e.
g.
you use them when applying to bookmarks on your webpage.
When using ids, a # has to be added before the id in the stylesheet.
As mentioned, Ids have higher specificity than classes and types.
If you have conflicting styles among a class, a type and an id, the winner will be id (after all she is the youngest child in the family…).
Select ids if you intend to apply the styles to one HTML element.
Examples of ids: #question-one, #answer-oneIn-line stylesIn-line styles have the highest specificity but it tends to be used less often as it is less easily maintained and less reader-friendly.
You also have to repeat it over different lines if it is applicable to more than one element.
Avoid using in-line styles.
Examples of inline-style: <div style=”color: red;”>Title</div>.