4 ms·
And there, I thought for a moment, my 38 KB CSS file is a mess and way too big. I guess, this puts it into perspective.
by WA 10y ago
And there, I thought for a moment, my 38 KB CSS file is a mess and way too big. I guess, this puts it into perspective.
- theandrewbailey 10y agoMy blog's CSS is 100k. Take out the three embedded base64 webfonts, and it's 6k.
- WA 10y agoDo you know a tool that turns Google webfonts into base64 for direct embedding?
- theandrewbailey 10y agohttps://www.fontsquirrel.com/tools/webfont-generator https://www.fontsquirrel.com/tools/webfont-generator Choose expert.
- davidwparker 10y agoMy blog's 2.4kb. It's way too big (and my blog sucks on mobile). I've been rethinking about how I can redesign my blog to be as close to http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ as possible.
- Nadya 10y ago965 bytes for mine. I should (but didn't, will tonight) minify the CSS, which will bring it down to 650 bytes. My site is very much in line with BMFW and IMO it looks pretty nice. But it's also very, very basic. There are very few things that I would style for a text-based website: 1) The h1, h2, p, strong, and a elements. Font-family, font-size, color, a:hover, and line height attributes only. 2) Create a container (eg: max-width 44em, margin: 0-auto, width: 100%) to wrap everything in. From there the "heaviest" parts of the blog would be navigation and how accessible you want a complete archive list to be or if Previous/Next links would be suffice. E: 800px -> 44em, see response below.
- Filligree 10y agoUnless you have some specific reason to otherwise, please specify container widths using ems instead of pixels. That keeps things easy to read for users that want to override the font sizes. 40-60 is a good range.
- Nadya 10y agoYes! You're completely right and I've argued something similar against sites that like to set 62.5% font size on body. Thank you for calling out my poor example! I'll update it if it lets me. For those who don't yet know why this is a big deal, I made a Codepen to illustrate why: http://codepen.io/anon/pen/eZwxam http://codepen.io/anon/pen/eZwxam Change the font size from 18px to 12px and then to 24px to simulate users with varying default font sizes set in their browser. Note how the containers change. While it will vary from person to person, a fixed 800px width of a container with 12px font size is far too wide for my taste and far too narrow for 24px. While I find 44em is better for both. Note: I do not suggest ever changing the font size of body but it makes the example easy to use.
- ashitlerferad 10y ago> embedded base64 ...
- stan_rogers 10y ago"The problem... I should never say 'problem'... the opportunity we face is that one year's bloated web page becomes next year's normal, and then after that it becomes an example of parsimonious and elegant web design." - Maciej Ceglowski There's nothing at all wrong with thinking your file is getting a little out of hand even when there are examples of wanton recklessness all around you. That's as true even when there's nothing more you can do to make it smaller. I wish there were more people who had a sort of knee-jerk Hayes Smartmodem kind of reaction to everything they do that doesn't involve things like video and such. There's nothing quite like a page that's loaded and ready to rock about the same time the "I've clicked something" haptic feedback makes it to my brain.
- RUG3Y 10y agoI really like your response. I feel out of place on the front end because I'm a minimalist and I tend to keep things very clean and simple. A lot of the time it feels like I'm doing everything wrong.
- dimgl 10y agoJust because you're not doing it like everyone else, doesn't mean you're doing it wrong.