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

Why is CSS the way it is?

increment.com

Post reply on HN
Print view View original

111–120 of 173 posts

Re: Why is CSS the way it is?

#111

Post by [deleted] »

Izkata wrote: post #44
giantDinosaur wrote: post #6

Earlier quoted context omitted.

You can't work out the logical consequences of seemingly obvious properties. That is unlike 95% of most programming I do in any programming language I've ever used. Since I have zero interest in learning unintuitive interfaces to GUI design, I have zero interesting in excusing CSS. It is not difficult to learn, it is not difficult to understand in terms of conceptual understanding, it is downright tedious to learn th…

Probably because very few learn CSS right. In particular: the box model. All the devs I know that struggle with CSS don't understand it. The ones that don't have issues have internalized it and don't need to think about it much anymore. The box model is one of those fundamental building blocks you really should be learning very early on, a bit like an "if" statement in imperative languages - you can hack around it wi…

[deleted]

Re: Why is CSS the way it is?

#112

Post by nsm »

As someone not at all involved in web development, if I wanted to learn CSS properly, with all the new flexbox/grid support instead of fighting with margins etc, what are some good recommendations? Like say I don't care about browsers older than a year ago and I only want to use the sane parts of CSS.

Re: Why is CSS the way it is?

#113

Post by metalforever »

kerkeslager wrote: post #110
dsego wrote: post #102

Earlier quoted context omitted.

And then you discover semantic classes for styling elements, eg `.amazing_h1.with_padding` and use nested selectors for layout like `.blog_post > h1` or maybe even utility classes `.amazing_h1.with_padding.centered'.

If you're doing class='centered' or class='with_padding', I don't see any reason not to just do style='align-self:center;' or style='padding: 1rem;' instead. The class names communicate less (Is that centering the content of the element, or the element itself? Is that vertical or horizontal centering, or both? Is the text being centered?). And it doesn't allow you to make sitewide changes like a semantic class does (…

This mixing of concerns was garbage and still is garbage, regardless of whether its popular now.

Re: Why is CSS the way it is?

#114

Post by _greim_ »

CSS is a lot like JavaScript: cobbled together in a hurry and designed to be excruciatingly easy to get started with, almost to the exclusion of all other concerns.

It makes me wonder if it's even possible to design a language that's both easy for abject beginners, while simultaneously being powerful, expressive and productive for experts at scale. Is that even a topic of study in language design?

Re: Why is CSS the way it is?

#115

Post by LoSboccacc »

sixo wrote: post #90
inopinatus wrote: post #27

This is a somewhat superficial history that only briefly touches on origins, and doesn't discuss the fundamental idea behind CSS, from which everything else is, directly or otherwise, a consequence. Two decades ago I was overjoyed to discover that Scheme was finally going to have a useful application beyond illustrating SICP and writing koans to amuse myself, because DSSSL was on the cusp of evolving into the last do…

Can we just start over on the entire web stack? 1. create a serious styling and scripting framework, basically React as a language since people seem to like it 2. implement an interpreter in WASM. Ship the interpreter with the website unless the browser says not to 3. over time, build the interpreter into the browser

there's canvas, you can already write apps that target it both in unity and Godot, the latter spring a wealth of languages

Re: Why is CSS the way it is?

#116

Post by kotojo »

nsm wrote: post #112

As someone not at all involved in web development, if I wanted to learn CSS properly, with all the new flexbox/grid support instead of fighting with margins etc, what are some good recommendations? Like say I don't care about browsers older than a year ago and I only want to use the sane parts of CSS.

I haven't read this, but I know quite a few people who recommend this book by John Duckett http://www.htmlandcssbook.com/

These are resources I used to learn grid and flexbox. http://cssgridgarden.com/ http://flexboxfroggy.com/

The site I inevitably have open looking some how to do something with css https://css-tricks.com/

Re: Why is CSS the way it is?

#117

Post by hardwaregeek »

I was trying to articulate why CSS is so unpleasant for me. I've learned enough tricks and techniques to tolerate it, but there's still plenty of times where I despise it. There's a few glaring issues:

- No way to style according to siblings. This is a big mental model shift. Often times I want a div to be the same height as another div. Since CSS doesn't really allow sibling communication, I need to get the parent div to set the height and then tell the children to play along. Or manually set the height on both children.

- Error handling is so so bad. It sucks to have your styles break silently due to an errant comma or space. Well typed styles like bs-css[^1] have made this somewhat tolerable.

- The weird tug of war between positioning yourself versus positioning your child. I understand the reason for both but it's offputting having both as an option.

- Lack of z index positioning. Often I want to superimpose one element on another, say a caption on an image. Right now I need to resort to position absolute, then do the standard dance to center something by computing 50% + half the size of the overlayed element. Not fun. I'd love a flex-direction: into-page that does flexbox over the third dimension. It'd be a little tricky to understand but honestly not too bad.

What's weird is that in some ways these issues have gotten worse with components. Since I can reuse a component, I now need to think of how its styles will work in every usecase. For instance I had forgotten to set my component's background to white, since it was already white by default. When I moved the component to a blue background, boom, it became garishly blue. Of course this is my bad, but it sucks that we have to carefully engineer our styles such that moving a component into a new context won't screw it up.

[^1]: https://github.com/reasonml-labs/bs-css

Re: Why is CSS the way it is?

#118

Post by y04nn »

justinator wrote: post #106
sixo wrote: post #90

Earlier quoted context omitted.

Can we just start over on the entire web stack? 1. create a serious styling and scripting framework, basically React as a language since people seem to like it 2. implement an interpreter in WASM. Ship the interpreter with the website unless the browser says not to 3. over time, build the interpreter into the browser

> Can we just start over on the entire web stack? Haha, so sorry, but: no. And if we're starting over, when just start at the web stack?

I think it would worth it to start over with today's knowledge. The whole stack is garbage: HTTP should be replaced with HTTP2 or Quick, vanilla Javascrip is horrible, CSS feel even worse, HTML is not too bad.

Almost all browsers are Webkit based, and there a very few browsers in use (Chrome/Firefox/Safari) which should ease the transition. I can't imagine all the wasted time and energy the world is putting into the current state of the web. A new standard would make navigation more performant, snappier, more responsive and much more reliable.

Re: Why is CSS the way it is?

#119

Post by leephillips »

_greim_ wrote: post #114

CSS is a lot like JavaScript: cobbled together in a hurry and designed to be excruciatingly easy to get started with, almost to the exclusion of all other concerns. It makes me wonder if it's even possible to design a language that's both easy for abject beginners, while simultaneously being powerful, expressive and productive for experts at scale. Is that even a topic of study in language design?

Julia

Re: Why is CSS the way it is?

#120

Post by dsego »

kerkeslager wrote: post #110
dsego wrote: post #102

Earlier quoted context omitted.

And then you discover semantic classes for styling elements, eg `.amazing_h1.with_padding` and use nested selectors for layout like `.blog_post > h1` or maybe even utility classes `.amazing_h1.with_padding.centered'.

If you're doing class='centered' or class='with_padding', I don't see any reason not to just do style='align-self:center;' or style='padding: 1rem;' instead. The class names communicate less (Is that centering the content of the element, or the element itself? Is that vertical or horizontal centering, or both? Is the text being centered?). And it doesn't allow you to make sitewide changes like a semantic class does (…

Typically you have a design system that keeps things consistent. So you would have maybe 5-6 different padding sizes, eg padding-s, padding-xl or whatever. That's why you don't just do style='padding: 1rem;'. Instead you assign a predefined padding class that's defined by your design system. As for me using .centered, it was just a quick example, and you took it in bad faith and now are nitpicking minor details.

Sitewide changes are a trade-off, if you make one easy (adjusting one parameter for a class of elements) you make others more difficult. Like, what if you need to change only some blog-title elements from centered to left-aligned in your system, do you create blog-title-left-aligned? I don't think the problem you pose is any more relevant than any other possible arrangement of html/css changes.

Post reply on HN