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

CSS is hard no matter how good you are at it

aha.io

Post reply on HN
Print view View original

71–80 of 83 posts

Re: CSS is hard no matter how good you are at it

#71

Post by lisasays »

jaredcwhite wrote: post #34

CSS has been hard. Modern CSS is amazingly more straightforward. As others have pointed out here, this is a problem of trying to apply new functionality (and more modern CSS) to a legacy codebase. Obviously there will be weird issues there. If the entire parent component had been designed from top to bottom using flex/grid mechanics, I doubt a problem like this would have presented itself after the fact.

"Modern CSS" defined as ... what, precisely?

Keyword searches seem to pull up an unstructured soup of random essays and 'tips-n-tricks' type articles.

Re: CSS is hard no matter how good you are at it

#72

Post by lisasays »

hot_gril wrote: post #59
WheelsAtLarge wrote: post #5

It's always been a time sink for me. Besides using frameworks, does anyone have any suggestions on how to develop a css file without getting into the neverending hacks that require hacks to fix the hacks? I have yet to see a long term css file that's not a birds nest of fixes.

Ask ChatGPT to do it for you. It does surprisingly well.

Some people prefer to actually understand the code they deploy.

Re: CSS is hard no matter how good you are at it

#73

Post by xboxnolifes »

lisasays wrote: post #71
jaredcwhite wrote: post #34

CSS has been hard. Modern CSS is amazingly more straightforward. As others have pointed out here, this is a problem of trying to apply new functionality (and more modern CSS) to a legacy codebase. Obviously there will be weird issues there. If the entire parent component had been designed from top to bottom using flex/grid mechanics, I doubt a problem like this would have presented itself after the fact.

"Modern CSS" defined as ... what, precisely? Keyword searches seem to pull up an unstructured soup of random essays and 'tips-n-tricks' type articles.

To me, that means flexbox and grids. All of my past css formatting issues are solved with those two things.

Re: CSS is hard no matter how good you are at it

#74

Post by eurasiantiger »

gabereiser wrote: post #15
WheelsAtLarge wrote: post #5

It's always been a time sink for me. Besides using frameworks, does anyone have any suggestions on how to develop a css file without getting into the neverending hacks that require hacks to fix the hacks? I have yet to see a long term css file that's not a birds nest of fixes.

Sass helps with reusable code. Bootstrap and standards also help a bit. Bulma, PureCSS, Tailwind (Pro), Concise. These provide a good starting point. My issue is, ever since 1997, the spec hasn’t really lent itself to composability. Just a list of definitions. Maybe some shareable effects but not idempotent in and of themselves. From tables, to floating divs, to grid 960, to flexbox. We keep inventing new ways of dea…

> inheritance and composition

Also known as the C in ”Cascading Style Sheets”. Embrace the cascade instead of having every class fully represent a component-piece.

Re: CSS is hard no matter how good you are at it

#75

Post by eurasiantiger »

epgui wrote: post #44
amsheehan wrote: post #31

I agree with exactly one sentence in the comment thread so far. "CSS requires experience" If you're interested in actually learning css, and don't just want to complain about how poorly written css is bad, this website is invaluable and provides concrete examples of how to build layouts and style elements. https://web.dev/learn/css

I agree, but I'd even say that becoming pro at CSS is orders of magnitude easier than becoming pro at your average programming language. I think engineers just tend to not take the task seriously, and don't apply themselves enough. You just need to actually understand the box object model and a handful of common gotchas.

CSS is essentially declarative programming for several different black-box systems.

How selectors are written has exponential performance implications. Using the wrong type of transform might make your page forego hardware acceleration, or use more battery on a mobile device.

At least typical programming languages are targeting a known set of environments and devices with known characteristics.

You definitely need to understand a lot more than the box model and a handful of gotchas.

Re: CSS is hard no matter how good you are at it

#76

Post by eurasiantiger »

sourcecodeplz wrote: post #12

The "trick" is to employ progressive enhancements. Also, the less CSS, the better. + no shame in using !important sometimes. All in all, CSS requires experience

Better off repeating classnames (.foo.foo { color: pink; }) than using !important.

Re: CSS is hard no matter how good you are at it

#77

Post by gabereiser »

eurasiantiger wrote: post #74
gabereiser wrote: post #15

Earlier quoted context omitted.

Sass helps with reusable code. Bootstrap and standards also help a bit. Bulma, PureCSS, Tailwind (Pro), Concise. These provide a good starting point. My issue is, ever since 1997, the spec hasn’t really lent itself to composability. Just a list of definitions. Maybe some shareable effects but not idempotent in and of themselves. From tables, to floating divs, to grid 960, to flexbox. We keep inventing new ways of dea…

> inheritance and composition Also known as the C in ”Cascading Style Sheets”. Embrace the cascade instead of having every class fully represent a component-piece.

I know what the C stands for, while it does cascade, it’s not inheritance and it always lends itself to “why does this have this style? I didn’t want that!”.

Re: CSS is hard no matter how good you are at it

#78

Post by windows2020 »

gabereiser wrote: post #77
eurasiantiger wrote: post #74

Earlier quoted context omitted.

> inheritance and composition Also known as the C in ”Cascading Style Sheets”. Embrace the cascade instead of having every class fully represent a component-piece.

I know what the C stands for, while it does cascade, it’s not inheritance and it always lends itself to “why does this have this style? I didn’t want that!”.

It's absolutely inheritance.

  .animal {
    font-weight: bold;
  }
    .animal.bear {
      color: brown;
    }

  ...

Re: CSS is hard no matter how good you are at it

#80

Post by miragecraft »

overthrow wrote: post #22

The problem is caused by vertical-align. The default value for vertical-align is `baseline`. The flexbox container inside pill2 "hides" the inner text, so pill2 is treated as having no text at all (for layout purposes). This is treated the same as a font having zero height. So the browser aligns a 16px font (or whatever) with a 0px font, and it comes out misaligned. My two solutions in order of preference would be: 1…

> The flexbox container inside pill2 "hides" the inner text, so pill2 is treated as having no text at all (for layout purposes). This is treated the same as a font having zero height. So the browser aligns a 16px font (or whatever) with a 0px font, and it comes out misaligned.

That’s actually not what happened.

Images have their baseline at the bottom edge, so Pill 1 is simply aligning its text to the bottom of the element which is the first item in Pill 2.

You can confirm this behavior by enlarging the image, you can see Pill 1 shifting vertically to align the text baseline to the new bottom edge of the image.

You can also swap the order of the and Pill 2 so that the text goes first. You will see that they will now align despite the fact that the inner text is supposed to be “hidden”.

An easy way to solve this is to give .wrapper a hidden pseudo element with a bit of text so it becomes the first item to be used for alignment.

.wrapper:before { content:"a"; width:0; visibility:hidden; }

You can also just set the image as background to avoid the element altogether.

Post reply on HN