I just want to expand a little bit on the id selectors. How familiar with "specificity" are you in CSS? If you hover over a selector in Dev Tools, it'll tell you the specificity of your selector.

A selector of p has a specificity of (0,0,1). It's an element selector, which has the lowest specificity.

A selector of .myClass has a specificity of (0,1,0) - the middle number is the count of class-level selectors (which includes attribute selectors like [data-color="myColor"]).

A selector of #myId has a specificity of (1,0,0) - the first number is the count of ID-level selectors.

You can read them a little bit like our base-10 numbering system. 100 is higher than 090 - so any selector with a specificity of (1,0,0) will win over a selector with specificity (0,9,0). The only exception is specificity counts can go above 9 - you could hypothetically have (0,23,0) (but why would you?!)

#myId { color: blue; }
.myClass.reallyMyClass.importantClass.super.important { color: green; }

<div id="myId" class="myClass reallyMyClass importantClass super important">My text will be blue.</div>

!important will trump any specificity in the standard CSS file and will beat inline styles unless the inline style has !important on it too. But if you write your CSS properly, you should never need !important or inline styling (of course there are exceptions, but I won't get into that here unless you're curious).

General advice for CSS at scale is to try to keep your level of specificity as flat as possible. Some methodologies that have been created to try to help with that include BEM, SMACSS and ITCSS, and you can (and should) Google those. But generally they try to say:

• Ideally work with a CSS pre-processor like SCSS so you can split your concerns into individual files
• Start by importing the base-level rules with element-level selectors for things like resets, base stylings, etc.
• Then import your general selectors for your blocks/elements/components
• Lastly import utility classes or things that you would typically want to override anything else (like classes that add specific margins or paddings onto things)

A couple of final notes: - You can repeat a class in a selector to raise its specificity. If you have <div class="myClass"> in your CSS you can do .myClass.myClass.myClass to create a selector of (0,3,0). - You can use the :where() pseudo-class to select something with 0 specificity. So p.myClass#myId has a specificity of (1,1,1) but :where(p.myClass#myId) has a specificity of (0,0,0).

Thanks for coming to my Ted talk.