Lit!

Native web components are a pain to build and design, mostly because the API is complicated and naive implementations can have less than stellar performance. Lit is a library, originally developed by Google, that provides an alternative API for dealing with the web component lifecycle, as well as a scheduling system that decorates your existing DOM with comment fields that provide for all of the performance of a virtual DOM without any of the memory overhead. Lit also provides excellent ergonomics for defining properties, attributes, accessors to component internals, as well as powerful idioms for defining events, boolean and string passing, and passing complex JavaScript objects from one component to another.

The components here were originally developed for a similar library, Minze, which was one of several such libraries with similar intent. They, and an accompanying article, were developed by Sergej Samsoneko and published at Codrops.

If you're a web component developer, you know that you can use the css ::part pseudoelement to give external developers permission to style, well, parts of your component. But did you know that you can use ::part to selectively style those parts based on the state of the component?

I'll show you how you can declare parts dynamically and serially, just as if they were child selectors, and use that dynamism to allow developers to style your component differently if it's disabled, or readonly, or "successful!" This example will use Lit, but it should work with raw web components or with any other library like Svelte, Ornament, or Minze.

BEM (Block, Element, Modifier), the CSS discipline in which CSS components are defined in ways that clarify how they're used, has long been lamented for its verbosity. Take this example from the home page banner on the BEM advocacy site GetBEM:

.opinions-box__view-more--is-disabled {
    color: gray;
}

This means that there's a high-level, class-based component, opinions-box, with a child element (a button, perhaps) with the class view-more, and this is the class you apply to that button when it's enabled.

These rule names can get absurdly long.

Personally, I find BEM to be about as unweildy as a Swiss Army Sword. It still insists that you memorize certain semantics and focus on how they interact with the rest of the world. We tried to tame the beast, but somehow, recently, it has once again gotten out of hand.

Recently I've been restoring an ancient website, one I first created in 1994, 29 years ago: The alt.sex FAQ.

alt.sex was the very first question-and-answer forum for sex-related questions on Usenet, even before there was an Internet, and somehow, when I was 28 years old myself, I wound up in charge of the editing team putting together the FAQ for that wild place. It's been 25 years, I wondered what it would be like to rebuild the site in a modern setting. It was fun.