In the last ~6 months someone linked to their blog about using JS-free custom elements for page structure and style in place of a methodology like BEM, e.g. using `<my-element>`/`my-element {}` instead of `<div class="my-element">`/`.my-element {}`. Might have referenced [HUG CSS](https://gomakethings.com/hug-css-how-i-approach-css-architecture/) as well. I'm sure I bookmarked it but I'll be darned if I can find it again. Pointers please?

[update: found it, or close enough. https://mastodon.peterjanes.ca/@me/115653576216161384]

#customElements #webComponents #css

HUG CSS, how I approach CSS architecture

Yesterday, I wrote about classless vs. class-based CSS design systems. In the article, I noted… There’s a middle ground between classless and class-based design systems. My favorite CSS boilerplates/frameworks/whatever include base styles for various HTML elements, some component styles for commonly used components (like nav menus and things), and some utility classes for nudging and tweaking the UI. I don’t know if you’d call them classless+ or Class-based-lite or what, but they sit somewhere in the middle.

Hmmm... I may be rethinking my strategy with the #WebComponents Language Server. Writing it in Node requires it to be installed to use it or any of the extensions. That's kind of annoying for our #dotnet, #php, #java, #golang, #rust, and #ruby friends

Ugh, Chrome does apparently not support :host(:has())

https://github.com/w3c/csswg-drafts/issues/11859

#css #webcomponents

[selectors][css-scoping] Should :host(:has()) match? · Issue #11859 · w3c/csswg-drafts

The group recently resolved to allow :host:has() per #10693 (comment). This allows an author to select the host element if it has a descendent in the shadow DOM matching a provided relative selecto...

GitHub

Let's be real: basic container elements like this SHOULD really just be a div with some #CSS, not a brittle #JavaScript monstrosity.

#webdev #webcomponents

Custom Asidenotes – Eric’s Archived Thoughts

"Previously on meyerweb, I crawled through a way to turn parenthetical comments into sidenotes, which I called “asidenotes”. As a recap, these are inline asides in parentheses, which is something I like to do. The constraints are that the text has to start inline, with its enclosing parentheses as part of the static content, so that the parentheses are present if CSS isn’t applied, but should lose those parentheses when turned into asidenotes, while also adding a sentence-terminating period ..."

https://meyerweb.com/eric/thoughts/2025/10/29/custom-asidenotes/

#customelements #metablogging #webcomponents #webdev
Custom Asidenotes

In which I turn inline asides into robustly enhanced sidenotes with CSS and just a touch of JS.

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Первая в мире библиотека Web Components в духе shadcn/ui Насколько я проверил — это первая подобная библиотека для Web Components. Если ошибаюсь — поправьте в комментах! 🤓 Let's get it

https://habr.com/ru/articles/972038/?utm_source=habrahabr&utm_medium=rss&utm_campaign=972038

#webcomponents #ui #uikit #unstyled #библиотека_javascript #frontendразработка #webразработка #готовые_решения #javascript #shadcn

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Окей, заголовок звучит максимально самоуверенно, я понимаю. Но насколько мне удалось нагуглить — это действительно первая попытка сделать что-то подобное. Если я не прав — напишите в комментах, я с...

Хабр

Made some progress wiring up artboard creation and wiring up the tree grid. This should be a fun background project to test out some of the #WebComponents prototypes.

#pixelart #design

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Первая в мире библиотека Web Components в духе shadcn/ui Насколько я проверил — это первая подобная библиотека для Web Components. Если ошибаюсь — поправьте в комментах! 🤓 Let's get it

https://habr.com/ru/articles/972038/

#webcomponents #ui #uikit #unstyled #библиотека_javascript #frontendразработка #webразработка #готовые_решения #javascript #shadcn

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Окей, заголовок звучит максимально самоуверенно, я понимаю. Но насколько мне удалось нагуглить — это действительно первая попытка сделать что-то подобное. Если я не прав — напишите в комментах, я с...

Хабр

When authoring or consuming a web component that exposes styles via CSS custom properties, should a file like this be converted use the `@property` at-rule and enforce types on each variable?

Is there a downside in doing this?

https://github.com/wbrowar/admin-bar-component/blob/2.0.0/public/admin-bar.css

#CSS #WebComponents

admin-bar-component/public/admin-bar.css at 2.0.0 · wbrowar/admin-bar-component

A framework- and CMS-agnostic admin bar web component. - wbrowar/admin-bar-component

GitHub