Live data from Hacker News

Ask HN: Is it just me, or is CSS too damn hard?

news.ycombinator.com

91–100 of 358 posts

Re: Ask HN: Is it just me, or is CSS too damn hard?

#91
In reference to a sibling comment (https://news.ycombinator.com/item?id=19021837):

> CSS is very much like magazine or print layout IMO. If you're not used to that, it won't gel well. If you think of layout from a design perspective and _not_ a programming perspective, it's really not that bad.

Yes! I went looking for this comment before adding it myself. Although I chose not to reply, since that's only part of what I want to discuss.

Once I realized that CSS is exactly what would make sense for laying out a textbook, it clicked for me. Until a few years ago, web design implementation was hacking this model to realize application and widget layouts.

Nowadays, flexbox and grid are basically universal, and we can use them as we please to do proper 2-D layout, and then use classic CSS for textual flow. It's a wonderful time.

But to go beyond that mismatch of expectations, the other historical problem with CSS is how to organize it in a reasonable way. Typically, you need a number of rules to apply to related elements in order to achieve some specific effect, but these get all jumbled with other effects that need to reference overlapping sets of elements. Combine this with the fact that CSS offers a crap-ton of features that you rarely need, especially in the selector spec. Preprocessors and methodologies like SMACSS and especially BEM helped give us ways to tame the madness. The BEM website (https://en.bem.info/) is a great resource for this.

This is all front-end dev skills that most of us learned by thousands of articles and hard knocks. I wish I could point you to a bible for this, but I don't know of one.

When it comes to design, that's its own skillset, which really may have little to do with CSS. Many of the designers I've worked with don't know how to implement their designs in CSS (although that's not always the case). The principles of good design ultimately come from the goals of the product, mixed with usability concerns and, of course, fashion.

Re: Ask HN: Is it just me, or is CSS too damn hard?

#92
post #88

Earlier quoted context omitted.

I think there's edge cases, dialects, and straight-up absurd rules in JS too. I don't think CSS is any less logical... but some might not be use to _declarative_ languages like CSS is?

The difference is that with JavaScript, you can install a linter and happily restrict yourself to the sane subset of the language. It's very realistic to never have to deal with any of the uglier parts of JS, even as a full-time front-end developer. With CSS, you can't avoid hacks. If you try to design anything non-trivial, you will have to employ tricky non-semantic tricks, run into edge cases, and have to settle on…

> 20+ years ago when a website page was thought as a 1 dimensional flow of text and pictures

Here's the thing though — most websites are still just a '1 dimensional flow of text and pictures'. They try to disguise it with multiple columns of guff, but it's still just text and images. Sometimes a video.

Sure there are web 'apps' now too, but most websites are not apps (thankfully).

Re: Ask HN: Is it just me, or is CSS too damn hard?

#93
My wife is a technical designer for jeans and recently started learning web development because we moved and there wasn't much denim industry. She turned out to be good at CSS and I think it's similar to making jeans. From looking at the overall shape and style you can't easily construct a pair of jeans. People with artistic style can sketch a pair of jeans but to actually go from that to the specs that go to the factory (what a technical designer for denim does) is a different set of skills. Art is definitely a part of it but it's also a lot of tricks of the trade and processes, and this seems analogous to CSS.

Re: Ask HN: Is it just me, or is CSS too damn hard?

#94
I was in your boat about five or six years ago. Programming was fine, CSS was kinda-not-really ok, and design was just non-existent. Over time though, it really is something you can learn.

I started by cloning designs in CSS that I liked. Same way I write programs just to learn. Pick a design and try to reproduce it. (Here's a good simple one that could probably be finished in a single sitting. [1]) Eventually I was able to clone an entire website while only referencing the internet for CSS details, not core concepts. It'll take time just like learning any language, but the theory behind CSS does make sense if you can peel back the layers of features built on top of it. (Like Git, the core model is beautiful - the CLI not so much.) Reading about the "cascade" part of "cascading style sheets" would be a good place to start if you get the basic syntax already. Then study the selector operators. All of them, there aren't that many.

Then read books on design. Info about CSS the language is readily available online. Info about design, not as much. Design for Hackers [2] is targeted at programmers and explains not just the what but also the why certain designs work. The way our brains interpret color and how that causes certain colors to work well together. How people process information and how to leverage that to make designs that "make sense." Visual Grammar [3] is a design reference book I refer to. It's like a SQL reference book - won't teach you the language (of design) but explains the options you have and when they could be useful. Things like "these types of alignments will produce this type of result."

Just remember that it takes time to learn a skill. And design is definitely that - a skill that can be learned.

[1] https://assets.awwwards.com/awards/images/2016/04/uxpin-teas... [2] https://www.amazon.com/Design-Hackers-Reverse-Engineering-Be... [3] https://www.barnesandnoble.com/p/visual-grammar-christian-le...

Re: Ask HN: Is it just me, or is CSS too damn hard?

#96
post #76

The whole set of web technologies is a mess. We‘re still in the stone age of web UI design, similar to the 80‘s era of home computing when everybody built their own UI with basic drawing primitives. It’s going to take a while till decent, cross-platform/device UI libraries make progress and designers discover the value of reusable components that just work and are familiar to users. Until then, we‘re stuck with terri…

The sad thing is that by the 1990s we'd figured out how to do good UI design for desktops, but then we promptly forgot every single bit of that knowledge when the web came along.

But the web wasn't supposed to be a UI platform - it was supposed to be a medium for delivering text with some images and media occasionally interspersed. Hypertext markup language.

Java applets could use Swing to get a normal-ish desktop UI and still be close to the web. But we keep trying to cram a UI framework into HTML/CSS.

The standards are slowly mutating and eventually they may provide a good UI framework.

JavaFX and Qt are both modern UI frameworks. Both provide a drag-n-drop interface to design applications using standard widgets such as lists and tabbed panes etc. You can modify the styling with CSS (at least in JavaFX, I don't have much experience with Qt). But the final layout spec is done in FXML or the Qt XML format - the XML has s and and , with CSS used to style these elements and dictate their visual properties. Instead of divs and spans hacked with css/JS into becoming scrolling lists and tabbed panes or horizontal container boxes.

I know the basics of HTML/CSS and it took me half an hour to figure out how to put 3 images side by side. Because divs can't represent that naturally - I had to use weird css and put 3 divs inside the outer div. In JavaFX you would put an HBox and drag three Images into it and it just works, because a HBox represents a UI concept instead of a document markup concept.

Re: Ask HN: Is it just me, or is CSS too damn hard?

#97
People have mentioned flex and grid a few times. I would add using box-sizing: border-box; solves a lot of problems stemming css' default of measuring from the inside of elements that need to fit together from their outsides. See https://css-tricks.com/almanac/properties/b/box-sizing/

Re: Ask HN: Is it just me, or is CSS too damn hard?

#98
post #87

I'd recommend spending some dedicated time learning about layout, not leaning on a framework. CSS layout is largely about the relationship between elements. Instead of looking at it as "I want this element on the right," try to see the relationships between elements. What's the group of elements, and what causes them to be where they are? (Generally, complex layouts are nothing more than nested groups of elements.) O…

> I'd recommend spending some dedicated time learning about layout, not leaning on a framework.

This 1000x. I was at a university that used Bootstrap in their Web Design class(!). And, predictably, it didn't work all that well. I spent some time tutoring one of the students and was amazed at the content they didn't cover. Not even modern things like Flexbox, but basic stuff like sibling/child selectors and the cascade.

Re: Ask HN: Is it just me, or is CSS too damn hard?

#99
post #85

It's not just you. Treating the web like a native UI framework, where you can set pixel positions directly to get the perfect layout, isn't going to work. The trick to using CSS effectively is to give up on achieving whatever design goal you have. Instead, you should settle for what CSS actually lets you do. Don't try to align text to the pixel; change your design so it doesn't require precise alignment. Ideally your…

Well you can do that (pixel perfect layouts) if you really want to or need to, and we often did in the early days, but that's really a failure to adapt to the medium.

Re: Ask HN: Is it just me, or is CSS too damn hard?

#100
post #57

CSS is almost a failure as technology. None of it's promises has been realized. The idea with CSS was that we would be able to separate content from presentation. Remember CSS Zen garden? Yet that has never been the case and div tags were always needed to be able to display something simple. Another promise was that content would be displayed easily on different mediums, desktop, mobile even print.. yet it's impossib…

It's only a failure when viewed through the lens of application development.

The web platform wasn't initially designed for applications, it was designed for documents.

If you're crafting a document, you can separate style from content pretty neatly with CSS.

Post reply on HN