Why the Hardest Part of CSS Is Specificity

It’s not easy to engineer unbreakable CSS with no side effects

It was Tech Tuesday at Tangled Web Services and no one had anything exciting to share. Devin and Ken’s performance benchmarking had been put to bed. Ernesto’s excitement over speculative push had died down. And bug triage and JIRA grooming was looming. Everyone was in a grumpy mood.

And it was still only Tuesday.

Even Clarissa, who was always the most sanguine of the crew, was noticeably on edge. But since no one else was volunteering to share their tech news, Clarissa decided to fill the void.

“I’ve come to the conclusion that the hardest part of CSS is specificity,” she began. “Not naming conventions, not modularity, but specificity.”

Devin and Ken, die-hard backend engineers, wanted to roll their eyes. What’s so hard about CSS they were thinking. . . . Those front-end guys don’t know what real problems look like. . . . CSS is for people who can’t write algorithms. (Of course, we can’t know for sure what they were thinking, but we can guess that it was something along these lines.)

“By specificity,” Clarissa explained, “I mean the algorithm that the browser follows to determine the hierarchical cascade of selectors that apply to each…