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

41–50 of 83 posts

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

#41

Post by SteelWo1f »

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.

You are absolutely right here. This problem arose because the surrounding code was much older. I would have liked to reformat it, but that would have been a huge lift compared to what I was trying to achieve.

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

#42

Post by romellem »

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…

This is correct. See here for some more examples:

- https://codepen.io/romellem/pen/rNZbPZQ

TL;DR: whenever you are using `display: inline-block`, be aware of `vertical-aign` issues that may crop up.

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

#43

Post by k1w1 »

migf wrote: post #6
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.

Tailwind * tries * to resolve this, but is probably just a different bird's nest.

The problem with Tailwind is that it is write-once code. You don't get any leverage.

Ideally as you write more code you get more reuse and writing future code becomes faster. In theory CSS classes act like this too. As you have more (well designed) CSS classes then writing future CSS becomes easier because you can reuse the past work.

Tailwind breaks this benefit that by encouraging you to write your CSS with glorified styles.

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

#44

Post by epgui »

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.

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

#45

Post by epgui »

SteelWo1f wrote: post #41
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.

You are absolutely right here. This problem arose because the surrounding code was much older. I would have liked to reformat it, but that would have been a huge lift compared to what I was trying to achieve.

That's been my experience as well... Any CSS issue that was not immediately obvious, in my experience, has always had more to do with insane markup and javascript than with css.

Just to give a fictitious example (inspired by real events)... I wouldn't really expect a Label react component to be made up of 26 nested html elements, 80% of which coming from third party libraries. Stuff like that can be hard to style, but that's just because there's inappropriate abstractions involved.

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

#46

Post by hk1337 »

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…

That's a much better solution than altering the content.

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

#47

Post by crispyambulance »

I have NEVER been able to understand why it took so long for css to get to grid.

2d layout was something that was “solved” by desktop application layout mechanisms like 25+ years ago. One would have thought given all the attention paid to web apps at the dawn of “web 2.0” that this problem would have been licked fast, but no, instead we had 15 years of floundering with floats and the proliferation of turgid frameworks like bootstrap to get by.

So much confusion and suffering just because there was no will power to straighten this stuff out into something sane and cogent.

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

#48

Post by pps »

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.

https://cube.fyi/

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

#49

Post by pessimizer »

beebeepka wrote: post #24

No, these days CSS is super easy. It makes fairly complex things very easy. One does not have to be a graphics programmer or good at math to perform very powerful operations.

I agree. The problem that people are having is that CSS has completely changed within the past 5 years, especially positioning, as all of the modules have been implemented. Things that once involved elaborate and fragile rituals to perform are now trivial to write. If you knew CSS 10 years ago and never went back to survey it since, you don't really know CSS now.

I finally stopped claiming I knew CSS until I took a few months to work through a top to bottom overview. None of the skills I had 10 years ago apply to modern CSS; I had to give up every habit. This is a good time to do a review, because CSS development seems to have slowed down considerably, and browsers are all pretty good.

However, CSS has become very big, and web development teams should really start respecting it as a specialty in itself, and making sure they have at least one person who knows it all. Even if they use tailwind.

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

#50

Post by SteelWo1f »

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.

There is no one silver bullet to clean up CSS. I think much of the problem is that many developers think of clean CSS as an afterthought. The same level of care and organization should be applied to CSS as you would apply to the rest of your code.

I have found that there are many tools out there:

- Design systems - Web components - Frameworks - Naming conventions - Higher level transpiled languages

Tools are meant to be used together, not in isolation. Any sufficiently complex app or page can benefit from mixing and matching these tools. At Aha! we have a design system, we use the BEM naming convention, we leverage web components, utility classes, and LESS.

With so many tools you can definitely get yourself into a mess unless you apply each one appropriately. That is where experience, discipline, and good old fashioned code reviews will help prevent a CSS nightmare file.

Post reply on HN