Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Writ – Opinionated, classless styles for semantic HTML

cmcenroe.me

Post reply on HN
Print view View original

11–20 of 65 posts

Re: Writ – Opinionated, classless styles for semantic HTML

#11

Post by drinchev »

This looks so good and nice. I would definitely use it with some modifications for a drop in replacement of markdown block inside some blog. But will wrap it in a class ( e.g. .article-content ).

What is a beneficial stylesheet system, according to me, is a system that can scale and gives you the opportunity to create a complicated website. This unfortunately doesn't. Sorry.

Re: Writ – Opinionated, classless styles for semantic HTML

#14

Post by nathankleyn »

namuol wrote: post #8

The notion that this feels refreshing enough to be compelling news is a testament to how incredibly convoluted our use of browser technology has become. It's nice to be reminded of CSS's humbler, less-radioactive days...

I agree. The more worrying thing is that with proposals like CSS Modules, we're going even deeper down the rabbit hole with classes everywhere for everything.

Re: Writ – Opinionated, classless styles for semantic HTML

#17

Post by oneeyedpigeon »

S4M wrote: post #10

I honestly can't see why the Writ stylesheet is better than the standard html output. It seems to me that he just used a new font.

It's almost more of a reset, than anything, but when you're authoring a classless stylesheet, the line is blurry. Using a readable width for the overall document makes it several times better than the default styles alone. The preformatted styles are much nicer than the defaults, too.

Re: Writ – Opinionated, classless styles for semantic HTML

#19

Post by ahoge »

dbaupp wrote: post #6
renke1 wrote: post #4

When I first learned about CSS I was pretty intrigued by the W3C Core Styles [1]. They were a pretty good illustration of the separation of presentation from the underlying markup. [1]: http://www.w3.org/StyleSheets/Core/

http://www.csszengarden.com/ is a neat example of that too: some wildly different visual designs with the same markup.

Zen Garden is pretty much the opposite of what one should do nowadays. Someone wrote some markup and sprinkled a ton of CSS hooks on top and then someone else came along and wrote the CSS.

It uses these 12 IDs:

css-zen-garden, design-archives, design-selection, zen-benefits, zen-explanation, zen-intro, zen-participation, zen-preamble, zen-requirements, zen-resources, zen-summary, zen-supporting

And these 39 classes:

archives, benefits, css-resources, design-archives, design-name, design-selection, designer-name, explanation, extra1, extra2, extra3, extra4, extra5, extra6, indicator, intro, main, next, page-wrapper, participation, preamble, requirements, resources, select, sidebar, summary, supporting, view-css, viewall, wrapper, zen-accessibility, zen-faq, zen-github, zen-license, zen-resources, zen-submit, zen-translations, zen-validate-css, zen-validate-html

If you've ever wondered how some websites end up with a meg of CSS, that's exactly how that happens. Each view/page starts with some markup, then you sprinkle some one-off CSS hooks over it, and then you write some overly specific CSS rules which are impossible to reuse. Rinse and repeat.

It's more efficient to create a library of reusable building blocks and then build your views/pages out of these. All of the more organized approaches (BEM, SUIT, etc) work this way. You always use what's already there and you only extend a component or create a new one if it's absolutely necessary.

Post reply on HN