The CSS mental model - QuirksBlog

PPK looks at the different mental models behind CSS and JavaScript. One is declarative and one is imperative.

There’s a lot here that ties in with what I was talking about at New Adventures around the rule of least power in technology choice.

I’m not sure if I agree with describing CSS as being state-based. The example that illustrates this—a :hover style—feels like an exception rather than a typical example of CSS.

The CSS mental model - QuirksBlog

Tagged with

Responses

keithjgrant.com

The state-based description makes sense to me. I’ve argued before that selectors are if statements: If this description is true of an element (it has this class name, it is a descendant of that, etc.), apply these styles. :hover is not really any different than JS adding or removing a class.

# Thursday, January 1st, 1970 at 12:00am

ppk 🇪🇺

Well, apart from :hover and friends we have the form pseudo-classes such as :valid and :invalid. … which means we get back to links and forms, the original interactive elements …

Shane Hudson

Wow, nice reference to 2004. The power of keeping a blog eh.

3 Likes

# Liked by getify on Tuesday, February 26th, 2019 at 6:09pm

# Liked by Kamil Dzielinski on Tuesday, February 26th, 2019 at 6:41pm

# Liked by ppk 🇪🇺 on Tuesday, February 26th, 2019 at 6:41pm

Related links

Popover API lands in Baseline  |  Blog  |  web.dev

It’s very exciting to see the support for popovers—I’ve got a use-case I’m looking forward to playing around with.

Although there’s currently a bug in Safari on iOS (which means there’s a bug in every browser on iOS because …well, you know).

Tagged with

Retrofitting fluid typography | Clagnut by Richard Rutter

Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!

Tagged with

Invokers (Explainer) | Open UI

This is a really interesting proposal, and I have thoughts.

Tagged with

Bruce Lawson’s personal site  : HTML popover, videos and display:blackhole

Bruce raises an interesting question with media playing in popovers—shouldn’t the media pause when the popover is closed? I agree with Bruce that this is a common use case that should be covered declaratively.

Tagged with

Jeremy Keith – Declarative Design – SOTR - YouTube

Here’s the video of the talk I gave at Monday’s meet-up here in Brighton—it’s a very condensed version of my longer conference talk on declarative design.

Tagged with

Related posts

Button types

Ideas for some declarative shortcuts.

Declarative design systems

Is your design system really a system …or is it more like a collection of components?

Standards processing

Pushing for a share button type—the story so far…

My approach to HTML web components

Naming custom elements, naming attributes, the single responsibility principle, and communicating across components.

Pickin’ dates

HTML web components for augmenting date inputs.