Utilizing :the place() To Scale back CSS Specificity Points

April 30, 2024

11

This morning, I began trying into the Open Props mission by Adam Argyle. And, to kick it off, I watched the video, Construct Customized Interfaces Utilizing CSS Open Props. In that video, Adam stated one thing that gave me pause: the entire CSS selectors that he authored in Open Props base style-sheets use the CSS pseudo-class operate, :the place(). This offers the selectors a specificity of 0; which implies that they are often overridden with ease in a concrete implementation. As somebody who has spent years preventing in opposition to horrible choices in a base design structure, this novel method was one thing that I needed to strive for myself.

Run this demo in my JavaScript Demos mission on GitHub.

View this code in my JavaScript Demos mission on GitHub.

Should you’ve used CSS for lengthy sufficient, you have virtually definitely come up in opposition to CSS specificity points. A specificity concern is while you go to fashion an HTML component with a comparatively easy selector, corresponding to:

.search

… solely to seek out out that none of your CSS is being utilized as a result of the given component has already been styled with a CSS selector that has the next specificity, corresponding to:

dialog type enter[type="search"]

This forces you so as to add wholly pointless segments in your CSS selector to be able to attempt to create an even greater specificity:

dialog type enter[type="search"].search

Within the aforementioned video, Adam is saying that so as keep away from this arms race of CSS specificity, he wraps his design system selectors in :the place(). So, for example, he would possibly rewrite the earlier CSS selector as:

:the place( dialog type enter[type="search"] )

Through the use of :the place(), the given selector all the time has a specificity of 0; which implies that our .search selector, which has a specificity of 1, can override it simply because the developer would hope.

To see that is in motion, I’ve created a small demo that makes use of :the place() to outline some default type kinds. After which, I override a few of these type kinds with plain component selectors:

<!doctype html>
<html lang="en">
<physique>

	<h1>
		Utilizing <code>:the place()</code> To Scale back CSS Specificity Points
	</h1>

	<type>
		<label for="search">
			Search Website:
		</label>
		<enter id="search" kind="search" />
	</type>

	<!-- Think about that is some design system that I pulled into my app. -->
	<fashion kind="textual content/css">

		:the place( physique ) {
			font-family: monospace ;
		}
		:the place( type label ) {
			show: block ;
			font-size: 20px ;
			font-weight: daring ;
			margin-bottom: 7px ;
		}
		:the place( type enter[ type = "search" ] ) {
			border: 2px strong #333333 ;
			shade: #333333 ;
			font-size: 20px ;
			padding: 0.5em 0.7em ;
			width: 300px ;
		}

	</fashion>
	<!--
		Think about that is me attempting to override some UI elements in a given view. Discover
		that my CSS selectors might be tremendous easy. It's because the :the place() pseudo-
		class operate (within the design system above) all the time leads to a specificity of
		`0`. In different phrases, it could all the time be overridden!
	-->
	<fashion kind="textual content/css">

		label {
			margin-bottom: 10px ;
		}
		enter {
			border-color: fuchsia ;
			shade: fuchsia ;
			font-weight: daring ;
		}

	</fashion>

</physique>
</html>

Discover that I am utilizing a vanilla component selector, enter, to attempt to override a context-aware default fashion for all search inputs situated inside a type. Usually, this would not work. Nevertheless, since my base kinds are outlined utilizing :the place(), my override is utilized efficiently:

Browser screenshot of element inspector showing that the simple CSS selector overrode the complex CSS selector.

As you may see, the search enter is rendered with hawt fuchsia textual content and border colours, provided by the enter selector. And, extra importantly, these values are overriding the core values provided by the :the place()-based selector.

That is very intelligent! I am eager to see what different intelligent strategies Adam has constructed into this Open Props mission.

Try the license.

https://bennadel.com/4645