Live data from Hacker News

Hell Yes CSS

wizardzines.com

91–100 of 120 posts

Re: Hell Yes CSS

#91
post #44

I really like CSS and find it relatively straightforward. Now, I think what helps me is that I've had 20 years to learn it as changes appeared. If I had to learn it all in one go now, how confused would I be? Very? Lots? It could be that a good way to learn CSS would be to try and replicate that experience and learn the history of it, not just the current state.

I think someone learning CSS today with an eye to targeting modern browsers with have an easier time. They won't have to learn those old hacks like floating elements, correcting box-sizng across browsers, centering elements etc.

CSS has endless ways of writing and representing the same thing which actually makes things harder, not easier in my opinion.

Re: Hell Yes CSS

#92
hey, author here. I always find it weird to see HN posts where you have to pay to read what it says (what's the point?) so here are 6 sample pages from the zine if you're interested in seeing more of what's in it:

* CSS isn't easy: https://wizardzines.com/comics/css-isnt-easy

* Inline vs block: https://wizardzines.com/comics/inline-vs-block/

* Specificity: https://wizardzines.com/comics/css-specificity/

* Centering: https://wizardzines.com/comics/css-centering/

* Hiding elements: https://wizardzines.com/comics/css-hiding/

* The box model: https://wizardzines.com/comics/box-model/

I also put together a site with a few examples of CSS behaviour I find surprising here: https://css-examples.wizardzines.com/

Re: Hell Yes CSS

#93
post #92

hey, author here. I always find it weird to see HN posts where you have to pay to read what it says (what's the point?) so here are 6 sample pages from the zine if you're interested in seeing more of what's in it: * CSS isn't easy: https://wizardzines.com/comics/css-isnt-easy * Inline vs block: https://wizardzines.com/comics/inline-vs-block/ * Specificity: https://wizardzines.com/comics/css-specificity/ * Centering:…

Love this! This is going to help so many people. Thank you!

Re: Hell Yes CSS

#94
post #87

The amount of ignorance around CSS is astounding. CSS doesn’t control how a page looks, it controls how the browser ”flows” a sequence of boxes and text onto the page one by one. Block boxes are 100% wide, grow to fit their content, and stack vertically with other boxes. Inline boxes grow to fit their content, and flow into the same rows with other inline content. They cannot have margins or paddings like block boxes…

Some of these are self-inflicted wounds, though. For instance, why do you have to declare inline boxes to be inline-block before you can add padding to them? Perhaps just because of backwards compatibility, which could perhaps have been solved a bit more elegant.

You’re right; inline-block is a later addition. It doesn’t change the mental model, though.

For example, it makes perfect sense for an empty inline-block to get aligned to the text baseline, while an inline-block with text also gets aligned to the text baseline. That is precisely what ”vertical-align: baseline” means: align this element’s line of text to the surrounding baseline. If the element doesn’t contain a text node, the inline-block does align correctly, but by default does not have a size unless explicitly specified.

And if there’s something in CSS that is to be avoided unless necessary, it’s specifying things explicitly.

Re: Hell Yes CSS

#95

I wrote a (much shorter) article in a similar vein a few years ago: https://css-tricks.com/css-is-awesome/ I find it fascinating (saddening, but fascinating) that so many programmers are so turned-off by CSS and find it so unintuitive. I almost want to set out on a research project to figure out why that is. My experience with it couldn't be more different. Here's one way of looking at CSS (which I didn't think of un…

This isn't fully formed in my mind yet so go easy: Intuition is linked to elegance, an elegantly designed language is intuitive. An elegant language is one that starts with a few core principles and from that derives the rest of the language. Lisp is an example of a programming language that does this beautifully well. Usually (always?) such core principles themselves are taken from mathematics. After all, maths is h…

I hear you and think you make great points. Thankfully, there IS a resource and approach to using CSS properly, embracing the nature of the browser environment and building up from profoundly well-researched and -articulated first principles. The approach is called "Axiomatic CSS", and the website is https://every-layout.dev.

Disclaimers:

1. No affiliation, just a grateful follower.

2. The site includes a mix of free and paid content. The free content includes the axioms you're seeking, and compelling examples of their use. The paid content includes a book and access to the full suite of composable layout primitives, and a component generator. Best $100 business expense of my 22+ year career in web development.

Re: Hell Yes CSS

#96

I wrote a (much shorter) article in a similar vein a few years ago: https://css-tricks.com/css-is-awesome/ I find it fascinating (saddening, but fascinating) that so many programmers are so turned-off by CSS and find it so unintuitive. I almost want to set out on a research project to figure out why that is. My experience with it couldn't be more different. Here's one way of looking at CSS (which I didn't think of un…

Having worked with a variety of GUI frameworks on small projects for work (WPF, Windows Forms, Xamrin, Android, iOS), I think HTML and CSS are the best out there for easy of use. It definitely helps that it has so much history and documentation behind it, but if I could build my GUIs in standard HTML and CSS without being forced into Electron or something else and still have my choice for a backend language, I'd find building GUIs way more fun.

Re: Hell Yes CSS

#97
While I haven’t read this one just yet, I’ve found all of the author’s previous zines incredibly useful. They’re densely packed with information, presented in a way that makes them great quick reference material. My only wish is that someone could print and bind them into a book.

Re: Hell Yes CSS

#98
post #97

While I haven’t read this one just yet, I’ve found all of the author’s previous zines incredibly useful. They’re densely packed with information, presented in a way that makes them great quick reference material. My only wish is that someone could print and bind them into a book.

in case you haven't seen it: No Starch Press published a box set of all my free zines called "Your Linux Toolbox". I have some links to places you can get that here: https://jvns.ca/blog/2019/10/21/print-collection-of-my-first...

Re: Hell Yes CSS

#99

I wrote a (much shorter) article in a similar vein a few years ago: https://css-tricks.com/css-is-awesome/ I find it fascinating (saddening, but fascinating) that so many programmers are so turned-off by CSS and find it so unintuitive. I almost want to set out on a research project to figure out why that is. My experience with it couldn't be more different. Here's one way of looking at CSS (which I didn't think of un…

The problem is that most CSS properties are contextual. They'll work one way in a certain hierarchy, and a different way in another. I've had issues where items would suddenly appear in REVERSED order if I changed the width of the container object (which would be fine if there were a CSS property "component-alignment: reversed", but there isn't). There are no enforced types. You can assign any value to any property name, even though invalid names will do nothing (and so typos cause hours of lost time). Some properties won't do anything unless they're done in conjunction with other properties, but you have no way of knowing that because there's no debug feedback mechanism. Even worse: some properties do nothing unless the SURROUNDING object has certain properties set to certain values. That's INSANE.

There's very little logic, but much lore and arcane incantations to CSS, which is what makes it a bad system (much like the crotchety systems in the bad old UNIX engineer days of "if it was hard to write, it should be hard to understand").

I've worked with a number of UI systems, and the best ones are ALWAYS component based, where component properties ALWAYS behave the same way internally, and where you can COMBINE them into more powerful components. This is not what happens with CSS. Basic things like alignment, size, borders, padding, margins all behave in weird ways depending on the context, or the presence or absence of text, or rely on similar sounding but subtly different properties that only work in certain contexts and not others, with no debug information to tell you why it's not affecting anything. That's not cool. If someone were to invent a programming language that behaved this way today, they'd be laughed out of the room.

Re: Hell Yes CSS

#100

I wrote a (much shorter) article in a similar vein a few years ago: https://css-tricks.com/css-is-awesome/ I find it fascinating (saddening, but fascinating) that so many programmers are so turned-off by CSS and find it so unintuitive. I almost want to set out on a research project to figure out why that is. My experience with it couldn't be more different. Here's one way of looking at CSS (which I didn't think of un…

I have a feeling people like to hate on CSS because making GUIs is hard and tedious work in general and introducing bugs is way easier than fixing them. And since many applications nowadays run in your browser, people end up having to use CSS, thus getting blamed for the general pain it is to make a good GUI. I have used native GUI kits like Tk and Qt and found myself fiddling just about as much as I would with CSS.…

YMMV but, almost every single GUI framework outside the web has:

- virtual lists

- customizable controls (including selects)

- easy solutions for layouts of any complexity (CSS got flexbox in 2015, Qt had it in early 2000s)

- a plethora of complex components out of the box (and most complex controls are rather trivial to implement yourself): date pickers, modals and dialog boxes, tree views, splitters, you name it.

Yes, building GUIs is hard. But building GUIs on the web is approaching impossible. There's a reason why most GUI frameworks on the web only manage to implement the same paltry set of components: buttons, badges, inputs. Very rarely there's a date picker and a table. And... that's about it.

Post reply on HN