Live data from Hacker News

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

news.ycombinator.com

241–250 of 358 posts

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

#241
post #117

I can't understand CSS either. For Elm you can bypass that headache with this library; https://package.elm-lang.org/packages/mdgriffith/elm-ui/late...

I'm quite interested in this library. Have you used it? What did you like and not like about it?

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

#242
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…

I don't think sass/less complicate this, they just bring in some familiar and useful elements.

How much further could css have gone on its own had it supported variables and functions from the get-go?

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

#243
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…

> 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

I will demonstrate why.

First, think of all the tools that you use that require a text interface. That may include a programming language (python, ruby, javascript, etc), a command line shell (bash, fish), a database client (mysql, psql), a configuration script language (systemd, nginx), etc. In all these the text based interface is the language used to speak with the underlying engine. Now, these languages must be designed and there are good designs and there are bad ones. If the language sucks, people can generally just choose to go with a competing alternative that has a somewhat more accommodating syntax. But CSS is a monopoly. We're stuck with it. For many of us it's a really shitty language that is guaranteed to live on, no matter what, just because, well browser technology.

Ok, enough ranting, on with my demonstration.

For this I'll take CSS positioning as a case. Let's say we decided to design a domain language to express how items on a web document must be placed. We could start from the perspective that when repositioning an element it should always be relative to some point of reference. That starting point could be the element's default position, or it could be the viewport, or it could be an ancestor element. From there we could devise some simple rules to express this.

To move an element you must first declare where you're starting from. For example moving with respect to its "default" position in the normal flow of the page would be declared as such (could be made optional too):

    position-reference: default
To move with respect to the viewport, you would start with:

    position-reference: viewport
To move with respect to an ancestor (and possibly even a distant cousin element):

    position-reference: parent  /* immediate parent     */
    position-reference: div     /* first div ancestor   */
    position-reference: root    /* the document         */
    position-reference: 
From there you could add a number of extra properties to fine-tune some specific behavior. For instance if you need to maintain the space that the element was occupying previously:

    position-maintain-gap: true
    
Or to prevent scrolling when the item is relative to the viewport:

    position-scrolling: off
The above patterns might seem vaguely familiar to some. That's because I've just described "relative", "sticky", "absolute" and "fixed" positioning (albeit with some added possibilities). As someone used to interact often with text-based interfaces, if I didn't know CSS, the above would be an approximation of my expectation of its rules for these concepts. This is how I understand them and how I anticipate a good domain-specific language would allow me to express them. It's precise and descriptive, but more importantly it's not too idiosyncratic, meaning that I'm not making up terminology that is so foreign that occasional users will have to be given a refresher every time they need to use them.

Now, contrast that with how these concepts are actually expressed in CSS. Instead of the different patterns being simply given as combinations of the above simple options, as I've demonstrated, they're rather given as ready-to-eat dish with labels such as "relative", "absolute", "fixed", "sticky". The whole thing is then sprinkled with ifs and buts. This "simplification" doesn't always have the intended effect though, and many many people are just confused when first trying to understand positioning.

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

#244
post #184

Earlier quoted context omitted.

That’s because the rendering engines in email software are crap, not due to a deficiency in CSS - I think Outlook still uses Word’s HTML renderer and even Gmail doesn’t support everything.

In all fairness that's probably a good thing. God forbid if emails today were like the rest of the web, hijacking the scrollbar, constant popups to register, like and subscribe. I like my emails like I like my actual mail; text and maybe the odd image.

I've got to disagree. Your preference for text emails doesn't mean those who do want rich-text or HTML should have to put up with crappy rendering that requires specialist developers.

I don't understand why HTML payloads can't just be loaded in a (streamlined) browser pane?

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

#245
post #184

Earlier quoted context omitted.

In all fairness that's probably a good thing. God forbid if emails today were like the rest of the web, hijacking the scrollbar, constant popups to register, like and subscribe. I like my emails like I like my actual mail; text and maybe the odd image.

I've got to disagree. Your preference for text emails doesn't mean those who do want rich-text or HTML should have to put up with crappy rendering that requires specialist developers. I don't understand why HTML payloads can't just be loaded in a (streamlined) browser pane?

Agreed. Rendering HTML and CSS in a vaguely standards-compliant way is surely a solved problem by now.

Javascript should stay firmly blocked though.

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

#246
Might 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 brain is wired as a mainly back-end developer.

I know react and others are also using the same strategies lately, but most of my experience is with WC.

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

#247

The tipping point for me was memorizing "A complete guide to flexbox" from the site "CSS Tricks" by using flash cards (Anki). The problems with CSS are: - A lot of features have been abused before there were good layout features in CSS. * - Errors are silent and you can repeat rules. - Selector specificty is a major fail in the language IMHO. * - Everything is global. * * An example: floating an image is an excellent…

> Everything is global

Shadow DOM and WebComponents to the rescue!

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

#248

Earlier quoted context omitted.

> Some (unlucky) programmers entire job was turning PSDs into HTML and CSS. That was my entry into programming many years ago. But I wouldn't call it unlucky - early web devs like me (we didn't really call ourselves programmers back then) had front-row seats at the beginning of a revolution, and it certainly was entertaining to watch and be part of. > CSS has nothing to do with design CSS works the way it does becaus…

> All the web designers I knew back in the early days knew some HTML and CSS and we'd often discuss possibilities and limitations of browsers and standards, and how to work around issues. They didn't just lob PSDs over the partition to the devs - there was an active dialogue and they knew their stuff. I find this false. PSD-to-code was very common back then. There even still some designers today that only work via im…

Not disputing the 'PSD-to-code'. Did it myself many, many times. I was disputing the idea that designers knew nothing about CSS. The good ones did.

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

#249
The thing is CSS is there's a lot of gotcha's to remember but I think people mostly struggle with it because they underestimate the HTML. You need to think through the box model for how to structure the elements before you start trying to move them around relative to each other.

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

#250
First of all, CSS is t like any programming language. It’s a cascade of properties that is tightly coupled to the tree-like nature of HTML. You don’t ‘understand’ CSS on it’s own; it must be in tandem with suitable HTML.

Secondly, the visual aspects of design (colours, fonts, layout) have got nothing to do with your grasp of CSS. I am not a designer and really struggle to make pages look good without a professional’s help. But give me a beautiful design and I’ll code it up in lovely CSS for you no problem.

P.S. check out Tailwind CSS https://tailwindcss.com/

Post reply on HN