Egor Kloos<p>So, <span class="h-card" translate="no"><a href="https://front-end.social/@kevinpowell" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>kevinpowell</span></a></span> asked about CSS Layers. <br>I've been using them for a few projects now, and I'm totally sold on their utility. They help with structural blocks of styles and, not insignificantly, with organising styles.<br>My layer structures often look something like this.<br>- tokens<br>- base<br>- design <br>- theme<br>- interface (mapping to other CSS libraries)<br>- component.props <br>- component.styles<br>- component.modifiers</p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designsystems</span></a> <a href="https://mastodon.social/tags/uxengineering" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>uxengineering</span></a> <a href="https://mastodon.social/tags/designengineering" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designengineering</span></a></p>