58 Bytes of CSS to look great nearly everywhere

Author mentions this took a long time to arrive at.<p>I recommend &quot;Web Design in 4 Minutes&quot; from the CSS guru behind Bulma:<p><a href="https:&#x2F;&#x2F;jgthms.com&#x2F;web-design-in-4-minutes&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jgthms.com&#x2F;web-design-in-4-minutes&#x2F;</a>

It&#x27;s a cool little snippet but it&#x27;s nothing more than three run-of-the-mill CSS declarations. The maximum width is specified, a small padding is applied and the margins around the element are set to automatic so it centers itself horizontally.<p>All the other styles applied on this pages are not part of the snippet. The weight of the titles, the spacing under the paragraphs, etc., are all specified on the page&#x27;s CSS file but not described in the blogpost itself. [0]<p>I was expecting something akin to normalize.css[1] which normalize the default styles of your page[2].<p>There are multiple very lightweight CSS &quot;frameworks&quot; that you should carry around instead of the snippet shown here. We are talking ~5KB. See <a href="https:&#x2F;&#x2F;github.com&#x2F;troxler&#x2F;awesome-css-frameworks#very-light" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;troxler&#x2F;awesome-css-frameworks#very-light</a> for a great list.<p>[0] <a href="https:&#x2F;&#x2F;jrl.ninja&#x2F;etc&#x2F;post.css" rel="nofollow">https:&#x2F;&#x2F;jrl.ninja&#x2F;etc&#x2F;post.css</a><p>[1] <a href="http:&#x2F;&#x2F;nicolasgallagher.com&#x2F;about-normalize-css&#x2F;" rel="nofollow">http:&#x2F;&#x2F;nicolasgallagher.com&#x2F;about-normalize-css&#x2F;</a><p>[2] Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You&#x27;re then supposed to add only the difference in decoration your design needs.

It&#x27;s 61 bytes because you&#x27;re using two spaces instead of tabs! :^)<p>You can shave off 2 more bytes by using em instead of rem. In your use case they are functionally the same. Rem is em relative to the root element. Your &lt;main&gt; pretty much is the root element.

The author actually loads 10x that much CSS (546 bytes) into the example page! [1]<p>Granted that is still not much but here I&#x27;ve augmented the 546 byte example to render nearly the same results with only 155 bytes. [2]<p>I&#x27;ve removed rem units as it&#x27;s easier for all to understand without them. Pixel units scale just fine across the browsers available these days so there&#x27;s no need for the mental hurdles and explained calculations. I&#x27;ve left them in the source HTML all the same for the sake of testing. The real feature making sites look good across a ever widening array of pixel densities today is this meta tag that was also used in the example HTML: &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt; [3]<p>Setting a font-family generically on the body tag gives the shortest path to consistent, doesn&#x27;t-look-like-times-new-roman, font styling possible.<p>I left the unmentioned line-height in because it&#x27;s a good default. It adds a little basic spacing between wrapping lines of text.<p>Styling elements that are children of the article to only have bottom margins gives consistent spacing to all content, and since top margins collapse [4] we can avoid dealing with them all together.<p>[1]: <a href="https:&#x2F;&#x2F;jrl.ninja&#x2F;etc&#x2F;post.css" rel="nofollow">https:&#x2F;&#x2F;jrl.ninja&#x2F;etc&#x2F;post.css</a><p>[2]: <a href="https:&#x2F;&#x2F;jsfiddle.net&#x2F;gb0ojdsL&#x2F;8&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jsfiddle.net&#x2F;gb0ojdsL&#x2F;8&#x2F;</a><p>[3]: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Mozilla&#x2F;Mobile&#x2F;Viewport_meta_tag" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Mozilla&#x2F;Mobile&#x2F;View...</a><p>[4]: <a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;what-you-should-know-about-collapsing-margins&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;what-you-should-know-about-collapsing...</a>

ObMFW:<p><a href="https:&#x2F;&#x2F;www.motherfuckingwebsite.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.motherfuckingwebsite.com&#x2F;</a> <a href="http:&#x2F;&#x2F;bettermotherfuckingwebsite.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;bettermotherfuckingwebsite.com&#x2F;</a><p><a href="https:&#x2F;&#x2F;evenbettermotherfucking.website&#x2F;" rel="nofollow">https:&#x2F;&#x2F;evenbettermotherfucking.website&#x2F;</a><p><a href="https:&#x2F;&#x2F;bestmotherfucking.website&#x2F;" rel="nofollow">https:&#x2F;&#x2F;bestmotherfucking.website&#x2F;</a><p><a href="https:&#x2F;&#x2F;thebestmotherfucking.website&#x2F;" rel="nofollow">https:&#x2F;&#x2F;thebestmotherfucking.website&#x2F;</a><p><a href="https:&#x2F;&#x2F;perfectmotherfuckingwebsite.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;perfectmotherfuckingwebsite.com&#x2F;</a><p><a href="https:&#x2F;&#x2F;codepen.io&#x2F;dredmorbius&#x2F;pen&#x2F;KpMqqB" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;dredmorbius&#x2F;pen&#x2F;KpMqqB</a><p>The OP&#x27;s 58 bytes <i>are</i> a very good start.

&gt; main {<p>Why not target &lt;body&gt; instead? &lt;main&gt; should not have content that is shown on other pages, like headers, footers, and sidebars, but it makes sense to have this CSS affect those areas.

Is it just me, then, that hates the &quot;narrow strip of text down the middle of my large monitor&quot; school of web design?<p>I don&#x27;t understand why I&#x27;m being forced to scroll when there&#x27;s all this blank space to the sides.<p>Even on my laptop, this looks strange to me, a huge wide expanse of nothing, and this little strip of text down the middle of the page.<p>What&#x27;s the reasoning behind this?

I think because so many of the people here are programmers, there will be some incentive to talk about the code, but the design is lovely.<p>It feels very easy to read. So much clutter has been taken away.<p>There’s nothing pulling at the edges of your attention and ruining the experience. I quite like it.

Doesn&#x27;t look &quot;great&quot; on mobile. 2rem margins are way too big for a phone screen. Too much wasted space.

Still wastes 60% of my display&#x27;s width.<p>Sorry, if you are into minimalist design I keep getting back there, with 58 bytes less of CSS: <a href="https:&#x2F;&#x2F;motherfuckingwebsite.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;motherfuckingwebsite.com&#x2F;</a>

I notice that the author doesn&#x27;t use capitals either and I&#x27;m not sure if visually I like that or not. It makes it feel more casual which is nice, but I think it does get harder to parse the sentences.

&gt; font-family: Arial, Helvetica, sans-serif;<p>Putting Arial <i>before</i> Helvetica :(

Can say I love the choice of background color.

I find it interesting that this snippet is used:<p>::selection { background-color: #ff0; }<p>Because when f.lux raises the color temperature for the evening it makes it so I can barely see if anything is selected while the normal color works perfectly no matter the temperature I set. At first, I thought it was one of those JS scripts that prevent selection.

My favorite resource about minimalist CSS : <a href="http:&#x2F;&#x2F;bettermotherfuckingwebsite.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;bettermotherfuckingwebsite.com&#x2F;</a><p>And at least it uses its own recommendations, whereas the OP isn&#x27;t (it ships way more CSS than the mere 58bytes it talks about)

&gt; it took me a surprising number of iterations to arrive at this point. perhaps that speaks to the fact that i know nothing about &quot;modern&quot; web development, or [..] just how hard it is to keep it simple in a world of complication.<p>It&#x27;s the latter. Being both simple and good is not easy.

I recognize some of those scrots. Funny to see another &#x2F;g&#x2F;ent with a minimalist setup and website.<p>I have about twice the amount of CSS, but most of it was to match my personal setup of colors&#x2F;fonts: <a href="https:&#x2F;&#x2F;nadyanay.me&#x2F;assets&#x2F;css&#x2F;style.css" rel="nofollow">https:&#x2F;&#x2F;nadyanay.me&#x2F;assets&#x2F;css&#x2F;style.css</a><p>361 characters (yours) vs 615 characters (mine)<p>Remove the font family and .fav classes and some of the unnecessary border overrides and mine comes out to a more equivalent 319 characters, while still retaining the spacing and color scheme.

Looks great even without CSS. The only exception is a very wide viewport.<p>1024x768: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;NEAenbY.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;NEAenbY.png</a><p>320x568: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;TdVjnKR.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;TdVjnKR.png</a><p>3480x1600: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;MfhxmRD.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;MfhxmRD.png</a>

Please don&#x27;t do this with max-width it makes printing a huge mess, I regularly have to edit max-width on sites that set it so I don&#x27;t have to print double or triple the number of pages, at least set max-width to be a relative unit for print.

That text area is way too narrow. It inhibits scanning to be unable to see very much of the text at once, because it forces you to scroll see more than about a paragraph at a time.<p>Readability isn&#x27;t the concern. Show me a book with margins that gigantic.

Cool! For my personal taste a little bit too much padding for my Galaxy S9 though. 1.25rem or 1.5rem would be sufficient and gives another 1-2 characters per line. But that&#x27;s mostly personal taste.

I would suggest you to always put a `color` when you define a `background-*`. Now that website can support darkmode, it would be a shame to see a white text on this yellowish background...

I&#x27;m definitely going to steal your website design (please don&#x27;t sue me). But I don&#x27;t like sans-serif fonts. What serif fonts do you recommend to use instead?

I’m an outsider to this world so please forgive the basic question: what is “main”?<p>Does its use depend on any particular markup in the HTML?<p>And how far back does it go as a CSS feature?

This is definitely better than nothing.<p>I personally prefer a bit more so that It looks good on my old crappy phone with far fewer than 600px wide. water.css is great.

&gt; it appears that the default font size for most browsers is 16px, so 38rem is 608px<p>What does px mean in CSS? I thought it was pixels but clearly not...

Sorry OP, but it doesn&#x27;t look good everywhere. You&#x27;re only using the middle 1&#x2F;3 of the screen on desktops.

Three more:<p><pre><code> body { font-size: medium; } main, article, content { font-size: 1rem;} p, li, dd, dt, blockquote { font-size: 1em; } </code></pre> Give the user their default font size, <i>not</i> some px-defined kludge.<p>Em vs rem: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=19608806" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=19608806</a>

Interesting.<p>I&#x27;d recommend Water.css for a more through out-of-the box experience that looks great anywhere.

Assuming that JoshuaRLi is Josh:<p>I really like your site. A minimalist website is surprisingly hard to achieve.

Looks like crap on high resolution monitors &gt;.&gt;

Then the page is ruined by the disastrous Arial font.

As someone else who is not versed in CSS this is epic

Love this! 58 bytes of css... and it&#x27;s typographically better than Wikipedia and many other &quot;styled&quot; websites!

I dig it! Good job!

This is beautiful.

There&#x27;s more CSS on the page than that though.<p>And it <i>doesn&#x27;t</i> look great everywhere. At 375px-wide the line-length of the text is ~35 characters, optimal would be 50--70.

&gt; that speaks to the fact that i know nothing about &quot;modern&quot; web development<p>I thoroughly agree with his statement and just wanted to post this to help emphasize the fact.

&gt; max-width: 38rem<p>&gt; supporting 600px displays at a minimum seems reasonable.<p>Max-width is just that: maximum width. That CSS is not &quot;supporting 600px displays at a minimum&quot;.

Another good resource for this &quot;minimal&quot; approach is:<p><a href="https:&#x2F;&#x2F;motherfuckingwebsite.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;motherfuckingwebsite.com&#x2F;</a><p>.. and it&#x27;s followup:<p><a href="http:&#x2F;&#x2F;bettermotherfuckingwebsite.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;bettermotherfuckingwebsite.com&#x2F;</a><p>(Both are SFW sites except for the use of expletives in the URL&#x2F;title).