It's 339 bytes of CSS which loads 2.3k of font css which loads 21k of woff2. 23k requiring two round trips (three if the stylesheet is in a separate file, four including the initial HTML load), and to prevent FOUT, the browser won't show any text at all until all the round trips are completed (or it decides it's taking too long and shows the wrong font). Plus you're adding a dependency on Google for no good reason.
I mean, it's not exactly worse than other websites, it's maybe honestly worth it because Fira looks pretty good, it's just not really 339 bytes.
I agree completely regarding light weight fonts. Wikipedia recently changed their mobile view font to Segoe UI Light for body text, and my old eyes can barely read the damn thing.
We're talking about different pages - one is the page with the blog post about this 339 bytes of responsive CSS (it's 2+MB). The other is the demo page with 339 bytes of CSS + the web font. The former is what the parent was talking about.
Yep ... the first thing I did was to see if he was "eating his own dog-food". As an aside, I'd recommend against putting the linked site on a projector at work (or at least look at it first to determine whether it fits your organization's culture).
Yes ... I didn't even think about the fact that "linked site" is ambiguous in this case. I wonder if you can play the "six degrees of separation" game (Kevin Bacon) with web-sites. How many links do you need to follow to get from any random site to any other? If the web is fully connected, then "linked site" is fully ambiguous!
Of all the people who over use css frameworks like bootstrap, I'm one of them as well and this is an attempt to start correcting that mistake.
I'm not sure what "over use" really means here, but I think calling it a mistake is wrong. Using bootstrap (or any other framework) is optimizing for something other than download size. That might be development speed, better design than you're capable of, cross-browser compatibility, etc, but it's not wrong unless you're building a site that really needs to be fast and small.
If you're building an admin page that'll be accessed by 5 people in total and can be cached for a year between updates then Bootstrap is great.
If you're building a blog that's going to get 2000 readers a month and want to concentrate on writing articles instead of writing frontend code, Bootstrap works really well.
If you're making a new login form for Facebook's homepage that'll get 100,000,000 visitors in the first hour it's live, maybe Bootstrap is the wrong choice.
CSS frameworks are tools, and they have their place. There isn't a universal rule that says using one is wrong.
What I meant by overuse is this. A lot of people I know, use bootstrap for literally everything. Even if it is just a 2 page website with a block of text and image and a form the first instinct is to drop in the entirety of bootstrap and just go on the way. Do you really need so much of css, hundreds of unused classes just because you wanted a grid, even when you can probably use flex and a lot of native css stuff.
My target for this post was people who use css frameworks are a UI standardising tool rather than a UI styling tool.
I'm curious, how do you plan on styling going forward?
Have you had a look at https://tailwindcss.com? I'm just finishing a large redesign project using tailwind on a Rails/Vue platform and the experience has been great. The idea is that all classes are small, focussed and do one thing only. The downside is that the markup starts to look like 1995 again. The upside is the speed at which you can style a site, and the lack of mysterious hard to track bugs. I really recommend trying it for a small project, but it's not for everyone.
Not parent but going forward I am hopping to get away without using any framework. Approach will be style all basic html elements and just use classes when there's no other way <button class="danger">.
I feel latest developments in css (especialy grid, flexbox...) make a lot of thing that where really useful before not needed anymore.
On the other hand I think this articles are a bit clickbaithy. Yest you can have a very small stylesheet but are you sure you don't want to style your form components? not having more than one type of button. Not dealling with navigation for both desktop and mobile?
I can make a 0 byte stylesheet for a empty body page and that's the perfect amount of css that page will need but has 0 usefullness in the real world.
Approach will be style all basic html elements and just use classes when there's no other way <button class="danger">. I feel latest developments in css (especialy grid, flexbox...) make a lot of thing that where really useful before not needed anymore.
Thats the endgame. Style the html elements rather than introducing classes for every frigging thing. Reserve classes for special purposes.
This article was just an introductory piece. I wanted to show that a majority of what non-tech/non-design people perceive about the website can be achieved in a very small amount of CSS.
My point was to move away from class based styling as much as possible.
CSS classes like "hover:bg-blue-dark" clutter the markup and if you have generated or user provided text in your website, things start to look out of place very soon.
That being said, tailwindcss seems to be a really great project for people who are building a website quickly and without major changes in structure.
I believe the criticism was fair here. The author specifically used "339 bytes" on the headline which implies a certain level of precision. Being orders of magnitude away from the claimed file size is not excusable. It just feels like click bait. Not counting imported CSS is simply wrong here. I can have a full-featured responsive CSS framework in <50 bytes if I @import bootstrap.css
Comments
It's ironic that the author chose to use a page that loads 1.5Mb of data, including 12 separate stylesheets, to write about a minimal stylesheet.
It's 339 bytes of CSS which loads 2.3k of font css which loads 21k of woff2. 23k requiring two round trips (three if the stylesheet is in a separate file, four including the initial HTML load), and to prevent FOUT, the browser won't show any text at all until all the round trips are completed (or it decides it's taking too long and shows the wrong font). Plus you're adding a dependency on Google for no good reason.
I mean, it's not exactly worse than other websites, it's maybe honestly worth it because Fira looks pretty good, it's just not really 339 bytes.
Fira looks fucking terrible.
Light weight, small, skinny, sans-serif is hard to read for most of the population.
It might be okay for 20 years olds with great monitors. It's tedious for everyone else.
I agree completely regarding light weight fonts. Wikipedia recently changed their mobile view font to Segoe UI Light for body text, and my old eyes can barely read the damn thing.
Bear in mind, the parent is talking about the page where this article is posted, not the CSS itself or the font.
As an end-user... why should I care if the bloat I download is CSS, or assets pulled via the CSS?
There’s literally no distinction.
We're talking about different pages - one is the page with the blog post about this 339 bytes of responsive CSS (it's 2+MB). The other is the demo page with 339 bytes of CSS + the web font. The former is what the parent was talking about.
The worst offender is the 1 MB background image that's masked with SVG to create that head icon-thing. There's no reason that should more than ~50k.
Yep ... the first thing I did was to see if he was "eating his own dog-food". As an aside, I'd recommend against putting the linked site on a projector at work (or at least look at it first to determine whether it fits your organization's culture).
I think most projectors would have a problem displaying the text in a readable way - the line width is so fine
Is it because of the linked site?
@purerandomnesss OP here. Copied that from http://bettermotherfuckingwebsite.com/
I think, I should probably change the text.
Yes ... I didn't even think about the fact that "linked site" is ambiguous in this case. I wonder if you can play the "six degrees of separation" game (Kevin Bacon) with web-sites. How many links do you need to follow to get from any random site to any other? If the web is fully connected, then "linked site" is fully ambiguous!
Yes, definitely. He's talking about [0]. It's really unprofessional (which is a pity because it's impressive!)
[0] - https://blog.koley.in/baserock/
It's because of the linked example in OP's link: https://blog.koley.in/baserock/
I plan to shift away from class based css frameworks myself over the next few weeks as I update my website.
Of all the people who over use css frameworks like bootstrap, I'm one of them as well and this is an attempt to start correcting that mistake.
Of all the people who over use css frameworks like bootstrap, I'm one of them as well and this is an attempt to start correcting that mistake.
I'm not sure what "over use" really means here, but I think calling it a mistake is wrong. Using bootstrap (or any other framework) is optimizing for something other than download size. That might be development speed, better design than you're capable of, cross-browser compatibility, etc, but it's not wrong unless you're building a site that really needs to be fast and small.
If you're building an admin page that'll be accessed by 5 people in total and can be cached for a year between updates then Bootstrap is great.
If you're building a blog that's going to get 2000 readers a month and want to concentrate on writing articles instead of writing frontend code, Bootstrap works really well.
If you're making a new login form for Facebook's homepage that'll get 100,000,000 visitors in the first hour it's live, maybe Bootstrap is the wrong choice.
CSS frameworks are tools, and they have their place. There isn't a universal rule that says using one is wrong.
That said, if the only part of Bootstrap you're using is the grid and you don't need the UI toolkit, then browsers have got you covered these days - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
I wholeheartedly agree with all the points that you have made here.
What I meant by overuse is this. A lot of people I know, use bootstrap for literally everything. Even if it is just a 2 page website with a block of text and image and a form the first instinct is to drop in the entirety of bootstrap and just go on the way. Do you really need so much of css, hundreds of unused classes just because you wanted a grid, even when you can probably use flex and a lot of native css stuff.
My target for this post was people who use css frameworks are a UI standardising tool rather than a UI styling tool.
I'm curious, how do you plan on styling going forward?
Have you had a look at https://tailwindcss.com? I'm just finishing a large redesign project using tailwind on a Rails/Vue platform and the experience has been great. The idea is that all classes are small, focussed and do one thing only. The downside is that the markup starts to look like 1995 again. The upside is the speed at which you can style a site, and the lack of mysterious hard to track bugs. I really recommend trying it for a small project, but it's not for everyone.
Not parent but going forward I am hopping to get away without using any framework. Approach will be style all basic html elements and just use classes when there's no other way <button class="danger">. I feel latest developments in css (especialy grid, flexbox...) make a lot of thing that where really useful before not needed anymore.
On the other hand I think this articles are a bit clickbaithy. Yest you can have a very small stylesheet but are you sure you don't want to style your form components? not having more than one type of button. Not dealling with navigation for both desktop and mobile? I can make a 0 byte stylesheet for a empty body page and that's the perfect amount of css that page will need but has 0 usefullness in the real world.
Thats the endgame. Style the html elements rather than introducing classes for every frigging thing. Reserve classes for special purposes.
This article was just an introductory piece. I wanted to show that a majority of what non-tech/non-design people perceive about the website can be achieved in a very small amount of CSS.
My point was to move away from class based styling as much as possible.
CSS classes like "hover:bg-blue-dark" clutter the markup and if you have generated or user provided text in your website, things start to look out of place very soon.
That being said, tailwindcss seems to be a really great project for people who are building a website quickly and without major changes in structure.
And the font is ugly to boot.
So it’s utterly pointless.
"Ugly" is a bit subjective. I quite like the font, and the Latin character set woff2 font file is only 13kb. It's not a bad choice.
The fine font strokes and color contrast make it quite hard to read
This comment gets posted on HN about every site that dares write about something with a small filesize and frankly it's getting a bit boring.
I believe the criticism was fair here. The author specifically used "339 bytes" on the headline which implies a certain level of precision. Being orders of magnitude away from the claimed file size is not excusable. It just feels like click bait. Not counting imported CSS is simply wrong here. I can have a full-featured responsive CSS framework in <50 bytes if I @import bootstrap.css
It is not boring. It is sad.