Kevin Powell - Community•4mo 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•4mo 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");

ἔρως•4mo 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•4mo 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.

rctneilOP•4mo 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...

ἔρως•4mo 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

rctneilOP•4mo ago

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

ἔρως•4mo ago

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

rctneilOP•4mo 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:”

ἔρως•4mo ago

it's all fluff

rctneilOP•4mo ago

In what way?

ἔρως•4mo 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

rctneilOP•4mo 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

ἔρως•4mo 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

rctneilOP•4mo ago

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

ἔρως•4mo 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

rctneilOP•4mo ago

But that’s not done with @import I don’t think

ἔρως•4mo ago

i dont know, the article doesn't say but the post talks about @import

rctneilOP•4mo ago

That article doesn’t mention “@import” once I did an in page search Not a single mention

ἔρως•4mo ago

🤦

rctneilOP•4mo ago

Go on, explain I’m happy to listen. This is not an argument. It’s a learning opportunity Oh you mean me.

ἔρως•4mo ago

i said here that it doesn't mention anything

rctneilOP•4mo ago

I think I understand now. You mean I asked about @import. Ok Misunderstood apologies I’m assuming in the article they just linked all those files into their page as normal

ἔρως•4mo ago

i have no idea, but the names seem to be from bundles the article doesn't share any information that can help to test the claim in the screenshot

rctneilOP•4mo ago

I’m assuming that’s caused by Propshaft

ἔρως•4mo ago

¯\_(ツ)_/¯ i don't know

rctneilOP•4mo ago

Would make sense

ἔρως•4mo ago

i don't even know if the file was served over localhost or not the download started very very very shortly after the ready events

Kevin Powell•4mo ago

Skimmed a bit at the end, but any real testing I've seen with @import shows that it's still less performant. Using multiple <link> is fine afaik just linking to all your files will leverage http2/3, but using @import doesn't afaik, because it has to load a CSS file to find out that it needs to load another CSS file. If you do go with a lot of <link>, it's probably worth testing. I've seen it work with just a few of them. If you hit 20, I have no idea. And of course, if you're going with vanilla html/css, you need to make sure you link to all the files you need in every page. But also, you can limit what is being loaded into a page too.

ἔρως•4mo ago

also, the css file needs to be processed, which is still some time used

Kevin Powell•4mo ago

yeah, but whether that's through multiple files or a single one, I don't think it makes a difference if they're all loaded at the same time

ἔρως•4mo ago

it makes a tiny tiny tiny difference

rctneilOP•4mo ago

Thanks, what method do you use on a site these days for pure css in regards to structuring the files and including them?

Zoë•4mo ago

Why not use SCSS?

ἔρως•4mo ago

he doesn't want to it seems to be some sort of self-challenge or self-handicap

Zoë•4mo ago

I see, still worth using the tools you've got 🤷‍♀️

rctneilOP•4mo ago

Because I’ve used scss for years and just using pure css without the hassle of processing in any way just sounds so much simpler. Just imagine being able to write your css and upload that file. No transforming it, no configuring a process. Seeing exactly the code in devtools that you wrote. That’s what we should all be aiming for at the end of the day. Processing should always be just a step along the path to that.

ἔρως•4mo ago

it's not simpler, trust me it's faster to deploy, if you don't care about the score in page insight

rctneilOP•4mo ago

It SHOULD be simpler, it SHOULD be what we’re all aiming for. Using a processor should not be the goal. The goal is to remove use of processors

ἔρως•4mo ago

but it's not simpler

rctneilOP•4mo ago

Why?

ἔρως•4mo ago

everything the processors do, you have to do manually

rctneilOP•4mo ago

Yes, but think of all the things we used to use processors for that we don’t need to now. I know there are still a lot of things processors can do for us that we can’t yet do natively. That’s why I said we should be aiming not to use them, not necessarily that you have to stop using them or is right to stop using them right now Processors require configuring, uploading your written css does not need any May not be right for now but we should be striving for it

ἔρως•4mo ago

im not talking about supporting new stuff im talking about things like minifying the final file

rctneilOP•4mo ago

Want to hop into voice chat in 2 mins to chat about it? Would love to speak in person

ἔρως•4mo ago

and auto-prefixing no, thanks. i dont like voice chats and im playing overwatch nothing personal

rctneilOP•4mo ago

That’s alright. No issue here I find minifying is becoming less of a requirement and prefixing, yeh you can easily add those in manually or skip them as those too are becoming less relevant now with @supports etc

ἔρως•4mo ago

@supports is pretty "recent"-ish minifying is a mandatory part people do absolute idiotic things like 2-space and 4-space indentation, which bloats the size of files then, you have to remove unnecessary comments, unnecessary whitespace, impossible selectors (e.g.: :focus:not(:focus) - but don't think any preprocessor does this) and more

rctneilOP•4mo ago

@supports has been around for four years now. I'm not saying processors don't have their place and can't be used. I'm just looking to try to not use them and see how i get on. I don;t need convincing about how cool preprocessors are, i've been using them since scss came out! I LOVE SCSS. Just trying to look to the future and try a new approach

ἔρως•4mo ago

yes, but you forget that browsers for consoles aren't updated as much as they should if you don't care much about seo, size, scores, compatibility and other things, no processors is the game

rctneilOP•4mo ago

But I haven;t said i would be taking this approach for all work. The context for my question is i wish to try this on my personal site. Don't care about crazy long legacy browser support etc. It's a testing ground. My question was about HOW to do something, NOT whether I should. People seem to forget this. I asked a Ruby question the other day elsewhere and got blasted for that because people didn't know the context and kept telling me that's not the way i should be doing it, but I actually was buildinga. comparison app that compares approaches so I understood their concern but it's not what i was asking them! Make sense? Context is key

ἔρως•4mo ago

im just pointing out the huge holes in your approach how you do it? you can do it all in a single file, multiple imports or multiple <link> i would go with the multiple <link>, and some inline styles (for example, inline the variables in a <style> tag, before the <link>)

rctneilOP•4mo ago

I'll do some testing and play around with it

ἔρως•4mo ago

you wont see differences unless you deploy it or fake the network performance in chrome the most realistic is to deploy to the same server, and test it there

rctneilOP•4mo ago

That's fine, I can do that. Not an issue. Focus on the wuestion and not be overly concerned whether it's the right or wrong solution.

ἔρως•4mo ago

that is part of the question

Zoë•4mo ago

Pre-processors when set up correctly builds in a fraction of a second and can set up auto-reloading to show the result imediately. There's no downside to using pre-processors

rctneilOP•4mo ago

But it's a step. It takes time. Not processing at all is INFINITELY faster.

ἔρως•4mo ago

not really, no it's faster once, but it's slower at downloading and everything else

rctneilOP•4mo ago

Take a look from this point on here: https://youtu.be/iqXjGiQ_D-A?si=L8GQnobanmaFSWtB&t=1820

Ruby on Rails

YouTube

Rails World 2023 Opening Keynote - David Heinemeier Hansson

In the Opening Keynote of the first Rails World, Ruby on Rails creator and @37signals CTO David Heinemeier Hansson (@davidheinemeierhansson9989) covered a lot of ground, including introducing 7 major tools: Propshaft, Turbo 8, Strada, Solid Cache, Solid Queue, Mission Control, and Kamal. Links: https://rubyonrails.org/ https://hotwired.dev/ htt...

Zoë•4mo ago

It takes the time to save and look at the web page to see it updating

ἔρως•4mo ago

lets assume it takes 5 seconds to build lets imagine that but it takes extra 5 milliseconds to download the unminified code you need 1000 visitors to be equal you didn't spent those 5 seconds, now 1000 users distribute it over themselves

Zoë•4mo ago

Also you waste your own time when writing plain CSS

ἔρως•4mo ago

css nesting saves SOOOOOOOOOOOO much time

Zoë•4mo ago

I'm a Stylus user, I don't even do braces, colons, semi-colons, on top of not needing to specify parents for every element which every other pre-processor does

rctneilOP•4mo ago

Yes, I LOVE nesting, couldn;t live without it.

ἔρως•4mo ago

oh, and if you need to change a color on the website, you need to change it everywhere, or you have to write css variables manually

Zoë•4mo ago

You also have access to loops, mixins, includes and more which smooths over developer experience

rctneilOP•4mo ago

Yes it does, I know As I said before, you don;t need to convince me about procesors. I've been using them for years!

Zoë•4mo ago

But you're saying that you're moving to CSS to save time and it's not true in any way

rctneilOP•4mo ago

When did I say I am moving? and when did i say i was doing it to save time? I just want to ahve a go?

Zoë•4mo ago

Here Developer experience is your #1 priority

rctneilOP•4mo ago

Seriously I feel like i'm getting attacked over and over in this chat.

ἔρως•4mo ago

nobody is attacking you

rctneilOP•4mo ago

Yes, I'm done with this chat.

Zoë•4mo ago

Sorry, but this thread looks to be "I don't want to use the tools that make making websites easier and it's no longer easy" and I'm struggling to understand why

rctneilOP•4mo ago

I came on here to ask a simple question

Zoë•4mo ago

I came on here asking why you were doing this, to which you told me it saves time

rctneilOP•4mo ago

But that's the thing. Don't. Help me with the question, don't question the reason Simple

ἔρως•4mo ago

but questioning the reason is part of the question

Zoë•4mo ago

My help is to use SCSS, and you should make DX your main priority

ἔρως•4mo ago

either you like it or not

Zoë•4mo ago

Also, you're new here but we get loads of people who come in asking for help with something wanting an answer in the area they were exploring, but the answer is somewhere else. This question is one of those times, and I'm not singling you out

rctneilOP•4mo ago

The reason I'm getting frustrated is that I read the article I referenced above, watched the video i referenced above, and also this one: https://www.youtube.com/watch?v=yFgQco_ccgg&list=PLHFP2OPUpCeY9IX3Ht727dwu5ZJ2BBbZP&index=17 One of the main themes that these push, is that a lot of these tools, SCSS being one, were designed to solve issues that were present. These days a lot of those issues are no longer issues, therefore why keep using them? AND YES, I KNOW full well that NOT all the issues are resolved or catered for. I KNOW THAT! But the goal here is to eliminate processors, and bundling and compilation, and transpiling etc. We don't need those. Well - let's rephrase that. We DON'T WANT those. The goal is simplification. I remember watchinga nd reading those articles and videos when they were first uploaded and I put them aside. I recently read that this years Rails World is coming up and made me recall them so i thought i'd go back, watch them and thought it'd be nice to give them a try. They were pushing ahead with those things over one year ago so now one year later things surely are in an even better position. And they are. YES I KNOW, One again, it's not perfect. YES I KNOW there are a lot of things prcoessors provide us with that we can't do natively yet.
What i'm getting at here is the GOAL is for simplification in the whole dev area. Simple code and workflows ensure less bugs, less problems, less code to debug and a more stable process. No matter what anyone says, it's true. I just wanted to have a go and wanted to know whether it was best to @import all the partials or to <link> them all, in this new CSS development world. END OF. BYE

Ruby on Rails

YouTube

Breno Gazzola - Propshaft and the Modern Asset Pipeline - Rails Wor...

Breno Gazzola, Co-Founder & CTO of FestaLab, discusses Propshaft, the heart of the new asset pipeline introduced in Rails 7. Rails 7 brought with it an overhauled asset pipeline that delivered a default “no-Node” approach to front end and improved support for modern bundlers like esbuild. This is great for developers as we are constantly searc...

ἔρως•4mo ago

I just wanted to have a go and wanted to know whether it was best to @import all the partials or to <link> them all, in this new CSS development world.

this has been answered before, at least twice

Zoë•4mo ago

Which is why I felt it was ok to change the subject The problem with striving for simplicity is that it creates a bunch of complexity that has been hidden up to that point

ἔρως•4mo ago

besides, the premise starts with huge flaws i did the "no processor" thing for 8 years, and it is pretty horrible

rctneilOP•4mo ago

Yes, I thank you for that. Why continue digging then. Just stop it! I wasn;t askinga gain. I was explaining the reasoning for my post. Times move on. I said i know things are not perfect. WHY can't I try something new? Why do we have to stick with the same tools? Let's have fun and try new things. Stop moaning at people that want to experiment?

ἔρως•4mo ago

it's not something new: it's something older and worse

Zoë•4mo ago

I'm not stopping you, I'm just saying it's a bad idea

ἔρως•4mo ago

objectively speaking

Zoë•4mo ago

I don't have control over your computer

ἔρως•4mo ago

if you want to suffer, go ahead

rctneilOP•4mo ago

Please both stop. I was TRYING SOMETHING NEW. PLAYING AROUND WITH TOOLS. DOESN'T MEAN I HAVE TO STICK WITH THEM. I CAN GO BACK.

Zoë•4mo ago

ἔρως•4mo ago

you said you don't want to use any tools now you say you want to play around with tools? im confused now

Zoë•4mo ago

Huh

rctneilOP•4mo ago

Stop being like that. You know preceisely what I meant.

Zoë•4mo ago

Playing around with ideas, I assume?

rctneilOP•4mo ago

I came on here to have a discussion and ended up getting bullied. I'm leaving. Goodbye. @Kevin Please close this. I've had enough. Not happy. Wanted a chill discussion at the future of where CSS can go without processors in play. This isn't right.

ἔρως•4mo ago

nobody is bullying you

Zoë•4mo ago

I disagree that this counts as bullying We pointed out issues, you then went on to disregard but then continue the conversation encouraging us to respond (this starts at https://discord.com/channels/436251713830125568/1273360048948641936/1273724340252184577)

Kevin Powell•4mo ago

I do think there was good discussion going on, but at one point it looks a lot like it went a bit far. Working on a personal site after years of using one system to literally be told "it's a bad idea" is no longer being constructive 🤷 They know the benefits of Sass, their looking to try seeing what modern solutions can do without it, and I can't blame them at all for that, specially on a smaller project where a lot of the benefits of build tools are so much less important

Zoë•4mo ago

But up until the last few messages it wasn't clear, we were just being told that it doesn't matter

rctneilOP•4mo ago

No you weren't. I have said all along that I love SCSS. I just want to try and have a go without it. Is there anything wrong with that?

Zoë•4mo ago

But it wasn't clear why you would do that

ἔρως•4mo ago

trying it? not really, no using it in a professional setting? yes, but that isn't part ot this

rctneilOP•4mo ago

Does it have to be clear why I want to do it?

ἔρως•4mo ago

but when trying it, you also need to know the upsides and downsides

rctneilOP•4mo ago

Yes, of course

ἔρως•4mo ago

and you did made the premise that not using tools is faster than using tools, which is not accurate and we were debating that part nobody said for you to do not do it

rctneilOP•4mo ago

When I said that I menat time being spent bundling, compiling, transpiling. If there is no build step then it's infinitely faster. Make sense?

ἔρως•4mo ago

makes sense, but still isn't accurate

rctneilOP•4mo ago

How is it not accurate?

ἔρως•4mo ago

the build step for css is usually faster than alt-tabbing and with hot module reloading, you don't even feel it

rctneilOP•4mo ago

But having no build step at all has to be faster!

ἔρως•4mo ago

by milliseconds

rctneilOP•4mo ago

Yes, but still faster and simpler

ἔρως•4mo ago

it's not simpler, because all the work done by the tool has to be done by you

Zoë•4mo ago

There's also the burden of the question asker. Rather than chasing something that is potentially the wrong course, those answering questions should know as much about the situation as possible, including goals. It gives us a better picture to answer the question more fully than just surface level. I've seen is so many times that someone wants a solution to A but they actually want B but we didn't have the information at the start You loving SCSS but not wanting to use it might have been because you hadn't set up your build chain properly and you were manually compiling the SCSS, so I needed to cover this kind of ground - this was reinforced by you complaining about time

rctneilOP•4mo ago

That's a separate issue. I'm not on about that. I was discussing the fact that compilation takes time.

ἔρως•4mo ago

it takes so little time that it shouldn't be considered, since the benefits of the tools outweight the time it takes to build even when i had a bug on one of the tools and it took a minute to build the css and js, it was a better experience than writting over 200kb of css by myself

rctneilOP•4mo ago

You guys are seriously stuck on the path that you ahve your setup that works for you and that is fine. I too ahve my own setup that works flawlessly. I jsut wanted to try a new approach with nobuild that looks and sounds interesting. That's all that matters. I don't care if you don't wish to try it or agree with it. FINE. NOT A PROBLEM. Don't keep pushing me to do something in a certain way when i never said i was going to abandon my current setup entirely

Kevin Powell•4mo ago

I thought it was clear from the start? I'm going to end this convo, I don't think anything constructive is coming from here on out.

rctneilOP•4mo ago

Where's the harm is trying a new approach?

ἔρως•4mo ago

i will tell you what would happen a lot when i was working in the method you want to test: - the files were way way way larger - the files were a huge mess - making changes was a lot worse, as i had to navigate an horribly long slab of text - stuff for a single element ended up all over the file because it was "easier" - the development experience was worse

rctneilOP•4mo ago

Yes, thanks Kevin

Kevin Powell•4mo ago

I get where everyone is coming from, but everyone is just getting their backs up

ἔρως•4mo ago

this is my experience and im sharing it

Zoë•4mo ago

But that was surface level, it wasn't clear why and there could have been something not previously said that could have resulted in a third option

rctneilOP•4mo ago

I don't have anything against processors, just want to try something new.

Gaming

Programming

Modern CSS without tools