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

31–40 of 65 posts

Re: Writ – Opinionated, classless styles for semantic HTML

#33

Post by chrismorgan »

err4nt wrote: post #31
chrismorgan wrote: post #5

Earlier quoted context omitted.

Yeah, font-size: 14px is a bad idea. It should really, really be put back to 16px (just leave the definition out!).

Font sizes are even better if defined in PT instead of PX!

Eh, 16px = 12pt, simple 4:3 ratio, why bother with the pt unit at all?

Re: Writ – Opinionated, classless styles for semantic HTML

#34

Post by ahoge »

gioele wrote: post #32

Can we please use this as the new basic stylesheet that is used in browsers like Firefox and Chrome? Who decided that those ugly default stylesheets must be be applied to unstyled documents? Why cannot unstyled document be nice by default?

It would probably break some websites.

Run this on some websites and you'll see some things moving around:

  document.head.insertAdjacentHTML('afterbegin', '')

Re: Writ – Opinionated, classless styles for semantic HTML

#35

Post by k__ »

ahoge wrote: post #19
dbaupp wrote: post #6

Earlier quoted context omitted.

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:…

I use the last approach, libraries that make up my elements.

But I always feel bad with all the CSS classes in my markup.

Back in the days I often had only But now I'm running around throwing bootstrap classes around like there is no tomorrow.

Re: Writ – Opinionated, classless styles for semantic HTML

#36

Post by chrismorgan »

andreapaiola wrote: post #13

umm ok but why not box-sizing? html{box-sizing:border-box} *,:after,:before{box-sizing:inherit}

Personally I think a much better question is why change the box-sizing? I’d call it out of scope for something like this. Very seldom have I encountered a situation where I actually want border-box rather than content-box; there are normally better ways of doing things. (Truth to tell, I’ve wanted padding-box more often than border-box in recent times, but only Firefox supports it.) Ideally calc() can be used too; it’s more powerful and expressive and well supported nowadays. The last piece of the puzzle to make it all fit together well on more complex arrangements is CSS variables, but they’re only available in Firefox at present.

http://caniuse.com/#feat=css-variables,calc

Re: Writ – Opinionated, classless styles for semantic HTML

#37

Post by chrismorgan » 

    ul li { list-style-type: disc; }
    ul li li { list-style-type: circle; }
    ul li li li { list-style-type: square; }

    ol li { list-style-type: decimal; }
    ol li li { list-style-type: lower-roman; }
    ol li li li { list-style-type: lower-alpha; }
These are bad. Very bad. Example: uses unordered styling on the ordered inner list.

A little better:

    ul > li { list-style-type: disc; }
    ul ul > li { list-style-type: circle; }
    ul ul ul > li { list-style-type: square; }

    ol > li { list-style-type: decimal; }
    ol ol > li { list-style-type: lower-roman; }
    ol ol ol > li { list-style-type: lower-alpha; }

Re: Writ – Opinionated, classless styles for semantic HTML

#38

Post by blowski »

ahoge wrote: post #34
gioele wrote: post #32

Can we please use this as the new basic stylesheet that is used in browsers like Firefox and Chrome? Who decided that those ugly default stylesheets must be be applied to unstyled documents? Why cannot unstyled document be nice by default?

It would probably break some websites. Run this on some websites and you'll see some things moving around: document.head.insertAdjacentHTML('afterbegin', ' ')

Chrome and Firefox both support user stylesheets, so you could do that.

Re: Writ – Opinionated, classless styles for semantic HTML

#39

Post by andreapaiola »

chrismorgan wrote: post #36
andreapaiola wrote: post #13

umm ok but why not box-sizing? html{box-sizing:border-box} *,:after,:before{box-sizing:inherit}

Personally I think a much better question is why change the box-sizing? I’d call it out of scope for something like this. Very seldom have I encountered a situation where I actually want border-box rather than content-box; there are normally better ways of doing things. (Truth to tell, I’ve wanted padding-box more often than border-box in recent times, but only Firefox supports it.) Ideally calc() can be used too; it…

As you say... browser support, but also is more concise.

And personally I love the other box-sizing :)

Re: Writ – Opinionated, classless styles for semantic HTML

#40

Post by theandrewbailey »

chrismorgan wrote: post #33
err4nt wrote: post #31

Earlier quoted context omitted.

Font sizes are even better if defined in PT instead of PX!

Eh, 16px = 12pt, simple 4:3 ratio, why bother with the pt unit at all?

16px will always be 16px, unless you redefine CSS pixel size. pt is more scalable.
Post reply on HN