Thread

1. shikwasa · 1790916089 · focus · HN ↗

   I understand the "starting point" part but I find the emphasis on "classless" interesting: you basically have to introduce a non-element selector as soon as you want make even the smallest layout change.

   For anything beyond a single page document, I find something like matcha.css (<a href="https:&#x2F;&#x2F;matcha.mizu.sh" rel="nofollow">https:&#x2F;&#x2F;matcha.mizu.sh, you can even pick your custom build on the same page) a practical starting point if you want to stay close to the elements.

   1. _heimdall · 1790941801 · focus · HN ↗

      I tend to start a project by making a classless stylesheet of sorts to set a baseline for the theme and branding.

      Its almost never all you need for an actual project, but it is a nice starting point to get the basics in place.

      I find that I look at the endless list of classless stylesheets shared online as a starting point, most have at least one or two interesting tricks worth borrowing. I don&#x27;t find using the off the shelf ones particularly useful though, it ends up with a very generic look to it like the old default bootstrap site or newer default tailwind site.

   2. nilslindemann · 1790943047 · focus · HN ↗

      With @layer this has become simpler:

          /* define layer order. Not necessary here */
          @layer pico, nils;
      
          /* import framework into layer */
          @import url("pico.css") layer(pico);
      
          /* define own styles in own layer, they have precedence. CSS vars are still global. */
          @layer nils {
              p:first-of-type {
                  color: green;
              }
          }

Unofficial Hacker News client; not affiliated with Y Combinator.