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

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

news.ycombinator.com

Post reply on HN
Print view View original

271–280 of 358 posts

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

#271

Post by madeofpalk »

svat wrote: post #269
_bxg1 wrote: post #126

1) CSS is for implementing designs; being able to use it doesn't require design sense for things like colors 2) I'm fascinated by the fact that so many of my fellow programmers - often the smartest ones - have so much trouble with CSS. I'm not sure exactly what the reason for that is, though I did write an article hoping to address it in some capacity: https://css-tricks.com/css-is-awesome/ I think part of the proble…

You make a good observation that: > The browser has lots of default, complex behaviors that drive layout, and […] CSS is more about […] guiding that automatic engine I think for most people who struggle with layout, what they really need to learn is what process the browser uses to lay out content, so that they can then turn their mind to how to guide it. Instead, I've seen hardly any CSS tutorials / documentation th…

Understand the browser and learning how to 'think in CSS' is the biggest trick I've found to being able to work in CSS efficiently.

That, and experience. Very rarely do you actually encounter genuinely new layouts in CSS, so with experience you just end up building in your head your own little 'component library' and pattern match designs to that.

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

#272

Post by madeofpalk »

mattmanser wrote: post #43
notjustanymike wrote: post #16

I work as a frontend architect and UX lead (yes, it's tiring), and you're encountering a common problem. Javascript is logical (sort of...), and a lot like learning math. It's fairly easy to validate your output. It works well with the logical side of your brain. Learning CSS is a lot like learning English. There's the basic grammar, but also tons of edge cases, dialects, and straight up absurd rules (Buffalo buffalo…

A layout engine and design are two entirely different concepts. CSS has nothing to do with design. It is the tool used to implement the design and there are loads of other layout tools out there that don't have CSS's infuriating quirks. On the flip side, they usually have steep learning curves because they are strict. For a long time, until less than a decade ago, designers knew nothing about CSS. They'd do a design…

> CSS has nothing to do with design.

What a bizarre statement. That's like saying words have nothing to do with stories, or paint has nothing to do with art.

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

#273

Post by goto11 »

pbhjpbhj wrote: post #253
goto11 wrote: post #229

Earlier quoted context omitted.

> Amusingly, tables came back. But they're called "layout tables" now, to avoid embarrassment I'm not sure exactly what you are referring to, but there have been some misunderstandings regarding tables. Before CSS, -tags were there only way to control the layout, but since CSS 2, it have been possible to achieve the same kind of layout which display:table in CSS without having to abuse -tags. But there is nothing wro…

>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 17 pixel wide transparent gif in the first cell.

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

#274

Post by mch82 »

GorgeRonde wrote: post #218
Animats wrote: post #132

Earlier 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. You select two things and apply a constraint - parallel, tangent, horizontal, collinear, etc - and the constraint system enforces those constraints. The lay…

> 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 algorithms in Interface Builder.

[1]: http://overconstrained.io/

[2]: https://constraints.cs.washington.edu/cassowary/

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

#275

Post by talkingtab »

For me (maybe) its the size thing. I've never read anything about "content driven size" so maybe I just don't understand it, but I'm often confused about why some box (div) is the size it is. When I use dev tools to try to understand, nothing seems to help. I can see how the rules cascade, I see how the flexbox and grid things work, I can grasp the DOM and selectors - but then why is everything so small or so large...

The suggestion of building a page from scratch is good and helpful And the next time a CSS friend wants to learn JavaScript I will suggest they start by learning i386 assembly language :-)

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

#276

Post by api »

the_pwner224 wrote: post #96
api wrote: post #76

Earlier quoted context omitted.

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. Hyper text 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. Ja…

That gets onto a major tangent, namely the fact that the web took over as a UI due to the incredible pain and security nightmare (bad isolation) of shipping and updating native apps. The web was a way to avoid the hell of installing a native app, so the web won.

This is (still) a problem with OSes. Mobile improved the situation a bit but not really that much. I am now reluctant to install mobile apps since virtually every mobile app is a potential vector for who knows who to spy on me. Mobile apps are isolated enough that they're unlikely to trash the device but they still have huge security isolation problems.

TL;DR: endpoint OSes suck so the web won in spite of being a crappy UI platform.

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

#277

Post by _bxg1 »

mattkevan wrote: post #177
_bxg1 wrote: post #126

1) CSS is for implementing designs; being able to use it doesn't require design sense for things like colors 2) I'm fascinated by the fact that so many of my fellow programmers - often the smartest ones - have so much trouble with CSS. I'm not sure exactly what the reason for that is, though I did write an article hoping to address it in some capacity: https://css-tricks.com/css-is-awesome/ I think part of the proble…

Good comment. CSS is actually pretty simple, as long as you start with the smallest elements and work up. It becomes a nightmare if you try and address everything individually. It’s not really a programming language, but a series of guidelines. I’ve seen this simplicity actually throw developers as they’re used to something much more complex and systematic. Preprocessors like SASS are great, but I wonder if they’re d…

Some preprocessors definitely overcomplicate things, but I consider SCSS to be essential because of three features:

1) Nested selectors

2) Imports

3) Variables

#3 is now solved/being solved natively, but I couldn't live without #1 and I'm not really sure why it hasn't been added natively yet

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

#278

Post by mxuribe »

You are not alone! Beyond the bugs and inconsistency that web browsers implemented, I've always felt that css was unnecessarily over-complicated. During development on projects, it seems to be the thing that used to create the most hair-pulling frustration. But nowadays, i have learned to let go of some things, including any OCD feelings about css. Either i construct the most basic views, and hand it over to someone else who is willing to put up with css (and who is better at picking colors)...or simply construct the basic views - and stick to the bare/default view without any colors or complex css applied at all.

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

#279

Post by amoitnga »

Being able to produce nice, competent design requires a very different skill set from the one developer has. It's not our job to know what are complementary colors, what is hierarchy etc. But when handed sketch/photoshop design it's part of my job to implement it.

It's not a coincidence that you brought up positioning.

> I can't center my divs properly.

I remember having a similar feeling. What made it click for me was searching for some articles like "how to master css".

Btw, just did that search and this is the article I remember I went over https://designshack.net/articles/css/5-steps-to-drastically-..., which is the first result.

Understanding how to position things I think was the biggest aha moment: floats, box model, the difference between positions such as fixed, static, absolute etc...

I think if you go over resources mentioned in that article you'll be good enough.

It feels like there is this idea that CSS is very simple, not a real thing, so we don't dedicate the time to learn it. You wouldn't expect to be good with React after one day, would you? It takes time to learn js, having that base it's easy to pick up React in a few days. And then you read articles on best practices, staying up to date with new versions etc.

CSS requires much less, but still some time and effort. Treat it as technology, give few days, don't skip steps, just sit down and learn it.

You can't solve `x + 5 = 10` when you don't know what `2 + 2 = ?`

So don't try "hey, CSS, this is the parent div, and all child divs must obey its size" until you know what is the difference between absolute and relative position.

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

#280

Post by swaggyBoatswain »

Doctor_Fegg wrote: post #14
Klonoar wrote: post #5

>Incidentally, but very likely related, I always failed to have any glimpse into how design works. I have no idea which colors "go" with which ones, and pretty much all fonts look like the same for me. Yeah, you're not a designer. Note I'm not insulting you. :) 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_…

Can I be really predictable and give a "very different response"? Worked in magazines for years, still do a lot of print cartography, and I find CSS a completely different mindset to Illustrator or InDesign or Quark or whatever. It just feels like a weird outlier to me - not freeform enough to fulfil the "design" role, not programmatic enough to fulfil the "developer" role.

I too worked in catalog design / printing. I had a lot of catalogs from many manufacturers (some 5 to 10 years old). This was how I learned UX design, I benchmarked design decisions made by other companies. Since I knew how those companies operated, this gave me insights on what good/bad designs are.

Designing a catalog is similar to designing a SaaS tool.

Designing a magazine is similar to designing a marketing website.

Working with AdobeIndesign taught me the following things, that translated into web development:

(1) Importance of style guides (things like BEM, SMACSS, etc): If you don't lay these out upfront, your catalog becomes incredibly inconsistent and hard to manage (too many components everywhere).

(2) How to organize your SCSS files - it's actually almost the same way you do it in Adobe Indesign. There's a `base` folder for global layout styling (fonts), `components` folder for things like buttons, tables, etc.

(3) How to layout a webpage. In Indesign, you start with the header/footer usually in your masterpage layout. Then you design each page from top to bottom generally (for a catalog at least). The viewport is more or less the size of a single page. You can only fit so much content there.

(4) Font-types - Open indesign, dig through all 100+ font types and see what the differences are. Some can handle fractional fonts, others have support for narrow styling (Arial).

(5) Design combinations - Take a look at a Grainger or McMastercarr catalog. There's many tricks for cramming a lot of information on one page. Minimal font sizes, horizontal lines in tables, use of white-space eye relief, consistent styling, etc.

(6) Constraints - If you saddle-stitch or 3 punch bind your catalog, your margins differ. If you make brochures, it's like designing for mobile devices

(7) UX Interaction - There's many ways of looking at a page, and where you want to draw a user's attention first.

UX tools are still playing catchup to what Indesign has offered for years.

I would say CSS is different mindset in that there are more rules. And you have to usually handcode it yourself. It's "design" in the sense of knowing what colors to use, size of content, etc. "Development" in the sense of knowing how to use master-page layouts / component designs upfront.

Post reply on HN