It's not just you. CSS is bad.
Ask HN: Is it just me, or is CSS too damn hard?
311–320 of 358 posts
Re: Ask HN: Is it just me, or is CSS too damn hard?
#312Earlier quoted context omitted.
Flow-like layout is just a sub-problem of 2D Layouting. Having it as the only way to do layouting (besides tables) has proven a nightmare to work with. That's why you got Flexbox (and now Grid).
Flexbox is a layout system for 1D content. CSS Grid is for 2D content, but it's designed in such a way that it can remain responsive to different container sizes, unlike . This actually makes it pretty complicated and unwieldy, because - once more for the people in the back - doing a responsive layout in explicitly 2D terms is a very weird thing to be doing and usually isn't what you actually want.
> Flexbox is a layout system for 1D content.
An individual flexbox container is one dimensional. To get a 2D layout, you nest rows and columns.
> ...doing a responsive layout in explicitly 2D terms is a very weird thing to be doing and usually isn't what you actually want.
I have no idea how you would come to that conclusion. To me, a "responsive" layout is one that adapts to the viewport size. The viewport is 2D. This is a 2D layouting problem.
A subset of that problem is concerned with fitting content of a fixed viewport width to a variable height, i.e. your classic web site. That's what you may call "1D content". Once you're trying to get a layout that adapts to both viewport width and height (i.e. an ordinary application), CSS can get quite ugly.
Re: Ask HN: Is it just me, or is CSS too damn hard?
#313Earlier quoted context omitted.
> CSS is not a real constraint language. If it really were a constraint language, it would be better. There's no constraint solver. Just a bunch of rules applied sequentially. > I'd like to have a real constraint system, like the one in Autodesk Inventor sketch mode Here you go: https://gss.github.io/ > GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint S…
Here’s the [parent project][1] and the old [research page][2] at University of Washington. The most recent implementation is Rust in 2018. The JavaScript repos are inactive. I’m not sure if that’s because the algorithms are considered complete or because the project is dormant. One of the researchers is no longer at UW and the other is an emeritus professor, so semi-retired. The claim is Apple uses these layout algor…
Too bad. That was the right idea.
With that, we could have Dreamweaver type layout working again.
That project seems to be more about the math than making layout easier. That's a problem with many academic projects. One thing I've liked about Autodesk products is that they often have complex math inside, completely hidden from the user. You see that in the CAD world, where the physical universe has to be modeled.
Re: Ask HN: Is it just me, or is CSS too damn hard?
#314Those are two different problems, imo, one is you don't know the language, and the other is design. I'm an artist and I've always understood design (not to say I was great at it, it still took experience, but I can see a site and I can understand why it does/doesn't work visually), so I can't speak much about how to learn it, except to first try to copy/observe from designs you think are good and go from their.
As for css. I actually like designing UIs from scratch so it's not like I hate it when I'm doing it, but it's bad. It's like 80% works as intended, but then there's 20% that is just weird quirks and there's no way around them but to memorize them. For example, I just ran into a particularly annoying one again recently (you can't do overflow-x: hidden with overflow-y:visible). This stuff is not going to change. At best they might add some new property to fix it. And the workarounds are often dirty.
I would suggest, A) keep a list of problems you run into and their solutions if they're particularly weird, even better, make fiddles of the solutions, and B) comment your css with why you did what when it's out of the ordinary. Sometimes you'll need to create extra wrapper divs, etc, and when you come back to a project after some time you'll have no idea why they're there or why you placed some weird css property, C) master flexboxes and grids and know their limits, that will get you 90% there usually.
Also using something like scss or less, or currently I'm trying styled components (css-in-js As for how related learning css and learning design are, I'd say, you do not need to know design to know how to use css, but you need to know css to be able to implement a design. You can get by without knowing design (there's plenty of css frameworks), but frameworks won't save you when you need to tweak them with css. Also you can practice design without knowing css (e.g. using photoshop or figma or something), although note many times nice designs are nightmares to implement in css, which is why I think learning css is more important.
Re: Ask HN: Is it just me, or is CSS too damn hard?
#315Earlier quoted context omitted.
Flexbox is a layout system for 1D content. CSS Grid is for 2D content, but it's designed in such a way that it can remain responsive to different container sizes, unlike . This actually makes it pretty complicated and unwieldy, because - once more for the people in the back - doing a responsive layout in explicitly 2D terms is a very weird thing to be doing and usually isn't what you actually want.
> Flexbox is a layout system for 1D content. An individual flexbox container is one dimensional. To get a 2D layout, you nest rows and columns. > ...doing a responsive layout in explicitly 2D terms is a very weird thing to be doing and usually isn't what you actually want. I have no idea how you would come to that conclusion. To me, a "responsive" layout is one that adapts to the viewport size. The viewport is 2D. Th…
> a "responsive" layout is one that adapts to the viewport size
Precisely. More often than not, accomplishing this requires more than just squishing and stretching. Panes have to wrap around at certain points and the layout has to shift. You can do this with a bunch of special cases, but the better way is to let the rules of flow work for you. For example, you can have a flex child "grow to fill available space but have minimum size", so that if less than that minimum size is available it wraps around to the next line. You want to talk about your layout in terms of a series of sections, not a fixed grid. This was impossible with ; CSS Grid provides tools for special-casing these things, but it's still way more obtuse than letting them occur naturally.
Re: Ask HN: Is it just me, or is CSS too damn hard?
#316Earlier quoted context omitted.
>Before CSS, -tags were there only way to control the layout // As an historical aside: that's not quite true to my recollection. p-elements had width, height (and possibly other attributes, margin, border?). And empty , hr, br(?), were used for rudimentary layout? Then there was color, bgcolor attributes; and font tags. Not sure when came out? This https://www.w3.org/Style/CSS20/history.html is probably much better…
I think you remember wrong regarding P. P never supported width or height or margin before CSS. With FONT-tags and other presentational html you could control colors and typography to some extent, but the only way to control white-space and sizes and margins before CSS was to use tables, typically combined with "spacer gifs". E.g you wanted to indent a paragraph 17 pixels, you created a table with two cells and put a…
You're probably right.
However, these (below) suggest that HTML3 spec at least had layout attributes like align, wrap, clear on p; and had width for hr (it was a Netscape extension on HTML2 too, apparently).
Also since HTML2 textarea had cols and rows attributes. There was also default styling on blockquote and lists that have indents. \ was used for horizontal "alignment" (tabs); code and pre too. I'm going to say there was some layout "tools" prior to CSS.
Quite interesting to read the specs now, at the time I was just groping around in the dark by myself, learning by reading source of live sites. Would have probably been much easier if I'd known a spec existed!
https://www.w3.org/People/Raggett/book4/ch02.html -- MSIE promise to include CSS Nov '95.
http://marc.merlins.org/htmlearn/html-ref.html#P -- HTML3 spec, I think?, dated 1995. Go up one level to find HTML2 spec.
Further aside: spacer GIFs I never came across until about MSIE4, avoided them myself, too much of a purist. In the Mosaic vs Netscape Navigator days I don't think anyone had started to attempt pixel-matched designs across different UA??
Re: Ask HN: Is it just me, or is CSS too damn hard?
#317Earlier quoted context omitted.
> Flexbox is a layout system for 1D content. An individual flexbox container is one dimensional. To get a 2D layout, you nest rows and columns. > ...doing a responsive layout in explicitly 2D terms is a very weird thing to be doing and usually isn't what you actually want. I have no idea how you would come to that conclusion. To me, a "responsive" layout is one that adapts to the viewport size. The viewport is 2D. Th…
> a "responsive" layout is one that adapts to the viewport size Precisely. More often than not, accomplishing this requires more than just squishing and stretching. Panes have to wrap around at certain points and the layout has to shift. You can do this with a bunch of special cases, but the better way is to let the rules of flow work for you. For example, you can have a flex child "grow to fill available space but h…
[deleted]
Re: Ask HN: Is it just me, or is CSS too damn hard?
#318Might only partly related, but I have had the same exact problem for years until I start using web components. Having to handle the CSS only for small bits at a time, in a contained environment made it much more logical and understandable to me. Most likely because it is more obvious to understand where to put specific CSS to achieve a certain behavior. I guess that small components tend to fit better with how my bra…
God I love downvotes without any explanations. I can't learn anything from it :S
Re: Ask HN: Is it just me, or is CSS too damn hard?
#319If anyone sees this, I'm a little late but understand your frustrations, it seems a lot of people in this thread feel the same.
I'd be more than happy to teach a group some basics/ simple rules to make your life easier, just let me know how.
I make stuff like this to teach myself https://vuild.com/game-watch/ (resize)
Re: Ask HN: Is it just me, or is CSS too damn hard?
#320Earlier quoted context omitted.
> It's sort of like object-oriented inheritance With the key difference being that there's no rigid structure to it at all, much less a strict-subset hierarchy. It's really more like structural object types, which can be easily composed, than OOP classes. It's set theory, rather than taxonomy. > Without some sort of build system, static analysis is difficult so it's hard to say if a definition is being used or not Th…
"This can be easily solved with good project organization" "All you have to do is closely mirror your UI components, pages, fragments, whatever, with the relevant CSS files. Then if you add or remove something in the markup, you add or remove it in the corresponding styles." Super simple. It is what it is and powerful etc, but simple? I have given up. I just use the minimum web tech to get by.
Yeah, "remember to keep these two files in sync by hand" is the opposite of simple. Like c++ header files, without the benefit of a compiler that will complain at you when you get it wrong.