Note: Harry doesn’t actually call it the “Ultimate Triangle of Specificity”… but we are. Why not? It’s a cool name. The organization of specificity is defined by a series of “layers”. Layers Note: Tools are specific to pre/post-processing languages like Sass or PostCSS, as mixin...
替樣式加上特殊的標籤 (Tagging code) 用物件繼承的方式註記 (Object/extension pointers) 使用看似合法的選取器 (Quasi-qualified selectors) 你應該避免過分修飾選取器,例如如果你能寫 .nav{} 就盡量不要寫 ul.nav{}。過分修飾選取器會影響網頁效能,影響 class 的複用性,也會增加選取器的權重 (Specificity),這...
这是CSS 与生俱来的特性,当不同选择器的样式共同作用在同一个元素上时,这些样式按照选择器权重 (specificity) 的高低叠加生效,合理利用这个特性能够大幅简化代码,令代码库条理清晰,而太过忽视这个特性很容易增加维护的复杂度,给自己制造不必要的麻烦。Harry Roberts 提出的 ITCSS 理论正是利用这个特性约束继承顺序,...
Harry, I’m sure, warns us about the risk that our rule’s specificity could be higher, and then we’re still in a complex project where our tests might not reveal others’ later problems, but now we’re making two assumptions that, for my taste, bring us on territory where I’d ...
Control Specificity Better with :is() The :is() pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. :is(section, article, aside, nav) :is(h1, h2, h3, ...
Specificity is something a web developer needs to master, and that includes knowing when to use IDs, when (and why) to group selectors, and also when to use !important. With that I encourage to review Harry Roberts’ premises in his post on the specificity graph to, if possible, build ...
CSS is a simple stylesheet language for defining a website or document’s presentation. However, this simplicity leaves the door open for many potential issues andtechnical debt— bloated code, specificity hell, duplicated code blocks with very little to no difference, leftover unused selectors, un...
Harry Roberts, on charting CSS selector specificity across entire codebases: A spiky graph is a bad graph. I would think if you went 100% on a methodology that encouraged class names for everything, your chart would be damn near flat. I wonder if that’s a worthy goal. Something to dr...
With Cascade Layers coming, we developers will have more tools available to control the Cascade. The true power of Cascade Layers comes from its unique position in the Cascade: before Selector Specificity and Order Of Appearance. Because of that we don’t need to worry about the Selector Spec...
High-specificity selectors are not hacks Being really specific with your selectors to try to override something in another part of a stylesheet (e.g.body .content #sidebar p) is not a CSS hack. It’s bad CSS, but it’s not a hack. ...