A presentation at DC Digital Experiences Meetup in in Washington, DC, USA by Ben Hong
CSS : the specificity wars Benjamin Hong Front End Developer @bencodezen
“Two CSS properties walk into a bar. A bar stool in a completely different bar falls over.” - Thomas Fuchs
css Crazy Specific styles
“It doesn’t matter how well-considered your source order is; how well you’re utilizing the cascade; what naming conventions you use; specificity can undo everything.
what’s specificity?
main.css 3,000 - 5,000 lines of code
main.css Credit to @csswizardry
Nested selector with ID? Nested classes with !important? Specificity An ID? Location in Stylesheet Credit to @csswizardry
Instead of building beautiful products, you’re wasting time and energy fixing someone’s poorly written code.
why now? • Why is this so important all of a sudden? • Everything is “agile” • Websites have evolved • Explosion of interest in coding
all css is not created equally
p { color: red; font-size: 1em; line-height: 1.5; } html body p { color: red; font-size: 1em; line-height: 1.5; }
common mistakes • Defaulting to ID for selecting elements • • #hero instead of .hero Selectors that are more than 3 layers deep • section #hero ul li a.current-page { … } • !important • a:link
Nested selector with ID? Nested classes with !important? Specificity An ID? Location in Stylesheet Credit to @csswizardry
Specificity Location in Stylesheet Credit to @csswizardry
modular architecture
Architectur e css modular architecture preprocessor Naming convention
my workflow preprocessor Architectur e Naming convention bem
my architecture • main.css 1. settings - configuration (i.e., colors, fonts, mixins, etc.) 2. vendor - third party styles (i.e., normalize, reset, etc.) 3. base - unclassed HTML elements (i.e., global, html, body, etc.) 4. layout - generic page layout styles (i.e., grid, spacing, etc.) 5. components - UI modules of the site (i.e., buttons, carousels, etc.) 6. pages - custom page layouts (i.e., short marketing campaign) 7. overrides - takes priority over everything else (i.e., 508, etc.)
naming convention block Element modifier .hero__button--primary
Problem: http://bit.ly/1TKP5FC Solution: http://bit.ly/1OeWOaP
final thoughts
general rules 1. Always choose classes over IDs for selectors* 2. Avoid using general element selectors (i.e., h1, h2, p, span, etc.)* 3. If you have more than 3 selectors in a declaration, you’re probably doing something wrong* 4. If your BEM class name is more than one level deep, you need to break it up into something small. 5. In the event you have to use !important or a very specific selector, add a quick comment so that future developers can make an informed decision.
things to remember 1. You won’t get it right the first time. 2. “Simpler is better” when writing good CSS 3. Discipline to write beautiful CSS is one of the hardest parts 4. Remember to pick and choose what works best for your team and projects. 5. This philosophy is just as much about improving code quality as it is for keeping your mental sanity
tools inventory • • • Pre-Processors • Sass (SCSS) - http://sass-lang.com/ • Stylus - http://stylus-lang.com/ Architecture • ITCSS - http://itcss.io/ • SMACSS - https://smacss.com/ Naming Conventions • BEM - http://getbem.com/ • Atomic Design - http://atomicdesign.bradfrost.com/ • OOCSS - https://www.smashingmagazine.com/2011/12/anintroduction-to-object-oriented-css-oocss/
Additional Resources • Managing CSS Projects with ITCSS by Harry Roberts https://speakerdeck.com/dafed/managing-css-projects-with-itcss • Atomic OOBEMITSCSS by Una Kravetz http://www.sitepoint.com/atomic-oobemitscss/ • An Introduction to BEM http://getbem.com/introduction/ • Installing Sass http://sass-lang.com/install
Q&A
Thank You! If you have any additional questions, feel free to reach out to me @bencodezen!
Tired of being terrified that one CSS change will cause a ripple effect of bugs across your site? How about trying to make a simple change only to learn that the previous developer nested the styles five layers deep and slapped an !important on it? Come learn about how you can help bring sane and scalable CSS architecture to your projects and organization.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.