Kevin Powell - Community•4w ago

Modern CSS without tools

Hi, I've been writing CSS for a long time, but for 99.9% of the last few years, it's all been with SCSS. I've been the beneficiary of nesting, mixins, functions, loops, the lot. It's incredible with SCSS can do. But now, on my own personal site, I want to try to rewrite and tidy up my styles and try to use just modern pure CSS with no pre-processor. My question is this: How can I structure it across multiple files with pure CSS? Is this possible? I feel like i've been out of the pure CSS game for a while and need a helping hand getting back in. Can I @import all my smaller files into one larger file? How does this work these days?

130 Replies

SoulSkrix•4w ago

Hi! The pure CSS approach I use when doing things is to use CSS modules. So the answer is basically yes, you can do both - I like modules for being able to apply individual classes from CSS directly. But it also works with clumping them up into one file, or however you wish to compose your site :) You can try the following: index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <p class="blue">This should be blue</p>
    <p class="red">This should be red</p>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <p class="blue">This should be blue</p>
    <p class="red">This should be red</p>
  </body>
</html>

first.module.css

.blue {
  color: blue;
}

.blue {
  color: blue;
}

second.module.css

.red {
  color: red;
}

.red {
  color: red;
}

styles.css

@import url("first.module.css");
@import url("second.module.css");

@import url("first.module.css");
@import url("second.module.css");

ἔρως•4w ago

Can I @import all my smaller files into one larger file?

you can, but i wouldn't do it: each @import in an uncompiled css file is a network request (and if im not mistaken, they are done sequentially) each network request suffers from possible ping pains. if im on a network with high ping and relatively low throughput (a bad 3g connection, or a flaky 4g connection), having many files ends up being slower than sending a single block. even in situations where the throughput is lower, sending a few bigger files is better than sending multiple smaller ones. at least run the files through sass so it can detect dumb mistakes and import the css for you into a single file that you can push to the server.

pb-travelog•4w ago

You could go the import route but as was mentioned above you will have multiple network requests. So from a performance standpoint you might not want to go down that route. If you just want to deal with css you could go down the route listed here. https://frontendmasters.com/blog/fine-ill-use-a-super-basic-css-processing-setup/ If you want more scoped properties you could create web components https://component-odyssey.com/articles/01-writing-components-that-work-in-any-framework. Hope this gives you some ideas.

Chris Coyier

Frontend Masters Boost

Fine, I’ll Use a Super Basic CSS Processing Setup. – Frontend Maste...

If you need a mini build process just for your CSS, Lightning CSS is a pretty good modern choice. That, plus a file watcher and live reloader offers pretty good DX.

rctneil•4w ago

Was reading this (https://world.hey.com/dhh/once-1-is-entirely-nobuild-for-the-front-end-ce56f6d7) and it looks as though as long as I use HTTP2, serving multiple .css files entirely normally just is not an issue. Then I can have no processing step at all, but still have small css files that deal with very small separate pieces

ONCE #1 is entirely #nobuild for the front-end

The dream has come true. It’s now possible to build fast, modern web applications without transpiling or bundling either JavaScript or CSS. I’ve been working towards this personal nirvana ever since we begrudgingly started transpiling and bundling assets in the late 2000s. Browsers just weren’t good enough back then to avoid it. But th...

ἔρως•4w ago

that's just corpo-speak with 100% fluff and no evidence i know that http2 and http3 can reduce the pains of serving lots of small files, but this article doesn't talk about any of it but basically, it says that it uses import maps: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap ... and that's it. oh, and guess what? that website doesn't use anything that's in the article! i can't find enough information about how this works to verify the results of that link

rctneil•4w ago

Import apps are for JS. I’m talking about CSS. And he is talking about ONCE #0, not that site specifically

ἔρως•4w ago

i know but there's nothing about the css in it

rctneil•4w ago

Yes there is: “And yes, this is now true about CSS as well. Here’s the same chart for our CSS. Individual files, relying exclusively on standardized CSS available in the latest evergreen versions of Chrome, Safari, and Firefox: css-nobuild.png And look at what that CSS actually looks like: image.png To people who haven’t seen modern, vanilla CSS, something like this might look like it’s from the future. Nesting?! Variables?! Yes. Yes. It’s good! And if you run this application, and all these many, small individual files, against the test of PageSpeed Insights, you’ll get a perfect 100 on the performance measurement. Our browsers are finally good enough to natively deliver the performance and ergonomics needed. Incredible achievement by the teams at Apple and Google and Firefox:”

ἔρως•4w ago

it's all fluff

rctneil•4w ago

In what way?

ἔρως•4w ago

in the way that it has no information at all on how it got to the results of the screenshot it's just marketing fluff to say that it gets 100 in page insights or lighthouse, it's the same-ish thing

rctneil•4w ago

I’m not fussed about the page insights stuff really. More about how to use pure standard css with multiple small files with no processing

ἔρως•4w ago

that already exists, and for a very very very very long time the problem is that it can be pretty bad, as i've explained before the article claims it can solve that, but doesn't show how

rctneil•4w ago

But it does explain that “The waterfall is vertical. HTTP/2 ensures we scarcely pay any penalty for sending so many individual files”

ἔρως•4w ago

yeah, and that's done with resource hints, which @import in css can't do you need to have something that can read the file and send all the headers before the request is done but you don't see it explained in the article, which is why i say that this is just fluff corpo-speak ad for their product

Gaming

Programming

Modern CSS without tools