Are Customized Properties a “Menu of What Will Change”?

PPK laid out an attention-grabbing scenario in “Two choices for utilizing customized properties” the place he and Stefan Judis had two completely different approaches for doing the identical factor with customized properties. In a single strategy, hover and focus kinds for a hyperlink are dealt with with two completely different customized properties, one for every state. Within the different strategy, a single customized property is used.

There’s something extra pure feeling about utilizing two properties, prefer it’s very specific about what a specific customized property is supposed to do. However there’s numerous magnificence to utilizing one customized property. Not only for the sake of being one-less customized property, however that the customized property is 1-to-1 matched with a single property.

Taking this a bit additional, you possibly can arrange a single ruleset with one customized property per property, giving it a kind of menu for what issues will change. To that PPK says:

Now you basically discovered a definition file. Not solely do you see the part’s default kinds, you additionally see what may change and what is not going to.

That’s to say, you’d use a customized property for something you plan to alter, and something you don’t, you wouldn’t. That’s actually an attention-grabbing strategy that I wouldn’t blame anybody for making an attempt.

.lil-grid {
/* will change */
–padding: 1rem;
padding: var(–padding);
–grid-template-columns: 1fr 1fr 1fr;
grid-columns: var(–grid-template-columns);

/* will not change */
border: 1px strong #ccc;
hole: 1rem;
}

My hesitation with that is that it’s, at greatest, a touch at what’s going to and received’t change. For instance, I can nonetheless change issues despite the fact that they aren’t set in a customized property. Later, I might do:

.lil-grid.two-up {
grid-columns: 1fr 1fr;
}

That wipes out the customized property utilization. Equally, I might by no means change the worth of –grid-template-columns, that means it seems prefer it modifications below completely different circumstances, however by no means does.

Likewise, I might do:

.lil-grid.thick {
border-width: 3px;
}

…and despite the fact that my unique part ruleset implies that the border width doesn’t change, it does with a modifier class.

So, so as to make an strategy like that work, you deal with it like a conference that you just stick with, like a generic coding commonplace. I’d fear it turns into a ache within the butt, although. For any declaration you determine to alter, you gotta return and refactor it to both be or not be a customized property.

This makes me take into consideration the “implicit styling API” that’s HTML and CSS. We’ve already acquired a styling API in browsers. HTML is was the DOM within the browser, and we type the DOM with CSS. Choose issues, type them.

Perhaps we don’t want a menu for what you possibly can and can’t type as a result of that’s what the DOM and CSS already are. That’s to not say a well-crafted set of customized properties can’t be part of that, however they don’t must characterize hardline guidelines on what modifications and what doesn’t.

Talking of implicit styling APIs, Jim Nielsen writes in “Shadow DOM and Its Impact on the Unofficial Styling API”:

[…] the shadow DOM breaks the self-documenting type API we’ve had on the net for years.

What type API? If you wish to type a component on display, you open the dev instruments, have a look at the DOM, discover the aspect you need, work out the precise selector to focus on that aspect, write your selector and kinds, and also you’re carried out.

That’s fairly outstanding whenever you cease and give it some thought.

I suppose that’s my largest beef with internet elements. I don’t dislike the Shadow DOM; in actual fact, it’s most likely my favourite facet of internet elements. I simply dislike how I’ve to invent a styling API for them (à la customized properties that wiggle inside, or ::half) somewhat than use the styling API that has served us effectively eternally: DOM + CSS.

The put up Are Customized Properties a “Menu of What Will Change”? appeared first on CSS-Tips.

You’ll be able to assist CSS-Tips by being an MVP Supporter.