Writ – Opinionated, classless styles for semantic HTML • Hacker News Board

Re: Writ – Opinionated, classless styles for semantic HTML

#61

Post by alwillis » Wed, Aug 26, 2015, 12:52 AM UTC

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…

Personally I think a much better question is why change the box-sizing?

Because the default content-box is a pain in the ass to work with, so to be able to use border-box all the time is a good thing: http://www.paulirish.com/2012/box-sizing-border-box-ftw/.

Re: Writ – Opinionated, classless styles for semantic HTML

#62

Post by andreyvit » Wed, Aug 26, 2015, 2:12 PM UTC

alwillis wrote: post #58

amelius wrote: post #25

Earlier quoted context omitted.

CSS has always been broken. For example, for many years it was impossible to vertically center an element in its parent (without extensive hacks). And still there are weird things like not being able to select all elements A which have B in them with a single CSS rule. In my opinion, the reason that web technology sucks is that the standards are being created for novices instead of for developers. If the web was a pl…

And still there are weird things like not being able to select all elements A which have B in them with a single CSS rule. You mean like this? :matches(A B) { color: blue; } http://www.w3.org/TR/selectors4/#matches

I think that, no, the point was to style elements A that happen to have B inside, while :matches will apply to elements B that are wrapped in A.

Re: Writ – Opinionated, classless styles for semantic HTML

#63

Post by Raphmedia » Wed, Aug 26, 2015, 2:38 PM UTC

alwillis wrote: post #60

Raphmedia wrote: post #52

Very nice project. This is a quality normalize stylesheet. It however pains me how this is heralded as something new by HN. "Finally, someone figured out how to do CSS correctly!" ... Shows how most people have no idea how to work with CSS yet comment on it. CSS Resets and Normalize stylesheets have been used for decades. Edit: I feel like I should add this I'm not bashing this project. I recognize the quality of it.

This actually doesn’t normalize anything; that is, it doesn’t account for differences in the various UA stylesheets and how they render things by default so things are consistent between browsers. Perhaps there are some things that could be incorporated from Normalize, which documents the subtle (and not so subtle) differences in how browsers handle certain elements: https://github.com/necolas/normalize.css

I agree that "normalize" wasn't the right word. It's however closer to what this do than "reset".

I don't know how I would call Writ. "Baseline" perhaps? Something like that.

Re: Writ – Opinionated, classless styles for semantic HTML

#64

Post by err4nt » Fri, Aug 28, 2015, 4:46 AM UTC

leni536 wrote: post #46

chrismorgan wrote: post #33

Earlier quoted context omitted.

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

Yeah, on 96 DPI. Anywhere else you rely on browser scaling if you don't use pt. Edit: Ok, so I'm not a web developer, so I read after it: http://www.w3.org/Style/Examples/007/units.en.html Turns out I'm wrong about that 1px is required to be 1 device pixel. But the 3/4 rule is not universal and only applies to print. I don't know how different implementations handle this.

CSS 'pixels' are a dark, dark magic, come back to the light!

CSS pixels are a measure of your viewing angle, the physical measurement of the device, and your screen's pixel density. Basically 15px should look like 15px should look like 15px, no matter what you're looking at, but because the actual pixel densities of screens differ it can be really weird to think about.

You may need a 30px icon to display 15px wide on a retina screen, even though it sounds like a 15px image should be 100% large (and therefore crisp) at 15px in CSS.

Re: Writ – Opinionated, classless styles for semantic HTML

#65

Post by err4nt » Fri, Aug 28, 2015, 4:49 AM UTC

theandrewbailey wrote: post #40

chrismorgan wrote: post #33

Earlier quoted context omitted.

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.

CSS 'px' units don't map directly 1:1 with pixels in your screen, it's weird. :/

In general, CSS 'PX' is great for spacing inside and outside containers. I often use 5px or 15px padding in places that don't directly touch or contain text. Where text is involved I like to define my spacing in 'em' units because those are relative to the 'font-size', so if I change the font size the spacing will still look great!