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

Is there too much CSS now?

css-tricks.com

Post reply on HN
Print view View original

61–70 of 125 posts

Re: Is there too much CSS now?

#61

Post by ericmcer »

bob1029 wrote: post #21

No. It's finally getting to be reasonable. The hackarounds are being displaced in droves now. Ever since CSS grid became a thing, I dumpstered all of the 3rd party web framework stuff I had been using. Placing elements in the right parts of the viewport (across all target devices) has always been 95% of the reason I consumed 3rd party libraries.

Do you find element placement to be a one and done solution in regards to using grid, flex or table? Or do each have their own use cases? I tend to default to flex for most things because I am very comfortable with it.

I guess I find keeping all the css properties in my head for all the different placement solutions cumbersome, flex and especially grid have a huge amount of functionality and custom properties, and I have been achieving everything fine using flex and a table when I need a literal table of data.

Re: Is there too much CSS now?

#62

Post by hbn »

djfobbz wrote: post #56

I’m personally more annoyed at the SVG pollution in modern day frontends. I’m not saying I hate SVGs but why in the heck are we producing 10k like html files by incorporating SVG paths directly into the HTML? There should be a standardized browser protocol to be able to insert SVG via filename and pass it any styling references.

What's wrong with having the SVG embedded in the HTML?

Someone who knows more about the inner workings of network technologies can correct me if I'm wrong, but I would have figured it's better to send a single large file than a bunch of smaller files.

Re: Is there too much CSS now?

#63

Post by Frotag »

politelemon wrote: post #20

Too much CSS, possibly. Too much cognitive load, definitely, I do think so. As a whole, modern CSS features feel unintuitive and often require a historical knowledge of the problems this new feature X was trying to solve, which means to me, it's laden with baggage. Some new CSS feature pages on MDN are absolutely gigantic in their explanations, and that means that there is a lot of 'talking' required to overcome its…

> As a whole, modern CSS features feel unintuitive and often require a historical knowledge of the problems this new feature X was trying to solve

There's no real way to debug unexpected behavior short of digging through the W3 spec. For example you can't set height / width on inline elements, but you'll never see any error messages or warnings in devtools / IDEs when you try. It doesn't help that tutorials rarely discuss how "layout algorithms" [0] (block, inline, flex, grid) affect certain rules.

[0] - https://www.joshwcomeau.com/css/understanding-layout-algorit...

Re: Is there too much CSS now?

#64

Post by alwillis »

tikhonj wrote: post #38
politelemon wrote: post #20

Too much CSS, possibly. Too much cognitive load, definitely, I do think so. As a whole, modern CSS features feel unintuitive and often require a historical knowledge of the problems this new feature X was trying to solve, which means to me, it's laden with baggage. Some new CSS feature pages on MDN are absolutely gigantic in their explanations, and that means that there is a lot of 'talking' required to overcome its…

I've just started playing around with CSS after a seven year break from web programming and have the opposite impression. The two biggest additions I've seen are flexbox and grid both of which massively decrease the cognitive load—compared to past options, it almost feels like cheating. Moreover, they do this by consciously not building on top of past layout features but instead doing their own thing. CSS is still a…

CSS is still a mess of random features that can't be cleanly composed or extended

If you separate old CSS from new CSS, it’s not so bad.

Yes, CSS has some technical debt from the olden times (like any programming language does) but these days, you need less and less of the old stuff.

For example, all of the alignment stuff created originally for Flexbox (justify-content, align-items, justify-self, etc.) were broken out in their own specification [1] and now CSS Grid and any future specification uses the same terminology to describe how to align something in a box.

Instead of every color model having it's own syntax, which is how CSS started, there's now color functions that can specify any color in any color space [2].

[1]: https://drafts.csswg.org/css-align/

[2]: https://drafts.csswg.org/css-color-5/#color-function

Re: Is there too much CSS now?

#65

Post by FigurativeVoid »

DerekBickerton wrote: post #10

CSS has become like a scripting language now. You can do things like nested CSS[0], keyframe animations[1], calc operations[2], etc It has become very JavaScript-like and this is why I always try to see if I can do something in CSS first before I resort to JS. [0] https://www.w3.org/TR/css-nesting-1/ [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes [2] https://developer.mozilla.org/en-US/docs/Web/CSS/c…

CSS also performs better than JS in many cases. It's also easier to write and manage.

Re: Is there too much CSS now?

#66

Post by alwillis »

naasking wrote: post #58
alwillis wrote: post #52

Earlier quoted context omitted.

CSS is also interpreted. CSS is actually compiled. WebKit uses a Just In Time (JIT) compiler [1]; I suspect all modern web engines do something similar. [1]: https://webkit.org/blog/3271/webkit-css-selector-jit-compile...

By that argument JavaScript is also compiled, so this point is wrong no matter how you interpret it: if "interpreted" means source code is transmitted and then executed in whatever fashion, then both JS and CSS are interpreted, if "interpreted" means a specific execution model on the client machine, then they are both JIT compiled and neither are interpreted.

By that argument JavaScript is also compiled, so this point is wrong no matter how you interpret it…

The primary difference between a traditionally compiled language (like C) and CSS and JavaScript is C is compiled before execution and CSS and JavaScript are compiled during execution.

There’s a reason why JIT stands for Just In Time compilation [1].

[1]: https://en.wikipedia.org/wiki/Just-in-time_compilation

Re: Is there too much CSS now?

#67

Post by alwillis »

perardi wrote: post #9

There is a lot of CSS now…but so many of the recent additions have been useful. Really useful. Like, solves real-world problems, easy to understand, on their way to being very well-supported. For example… …Container Queries. ( https://www.smashingmagazine.com/2021/05/complete-guide-css-... ) …Cascade Layers. ( https://css-tricks.com/css-cascade-layers/#browser-support-a... ) …the :has() selector. ( https://www.bram.u…

Good point.

For example, :has() has nearly 83% global support already [1]. Once Firefox enables it by default (it’s behind a flag currently) and more upgrade to the latest versions of macOS and iOS, we’ll soon exceed 90%.

[1]: https://caniuse.com/?search=%3Ahas

Re: Is there too much CSS now?

#68

Post by bob1029 »

ericmcer wrote: post #61
bob1029 wrote: post #21

No. It's finally getting to be reasonable. The hackarounds are being displaced in droves now. Ever since CSS grid became a thing, I dumpstered all of the 3rd party web framework stuff I had been using. Placing elements in the right parts of the viewport (across all target devices) has always been 95% of the reason I consumed 3rd party libraries.

Do you find element placement to be a one and done solution in regards to using grid, flex or table? Or do each have their own use cases? I tend to default to flex for most things because I am very comfortable with it. I guess I find keeping all the css properties in my head for all the different placement solutions cumbersome, flex and especially grid have a huge amount of functionality and custom properties, and I…

The general rule is that grid is for 2d layout and flex is for 1d layout.

I almost always combine the two by way of a nested hierarchy of elements. Grid is used for the strategic layout, and then within each area I may have flex (or more grid) as appropriate.

As for a "literal table of data", I still use table elements for this exact purpose. I do not use tables for layout anymore, unless its for HTML email.

Re: Is there too much CSS now?

#69

Post by alwillis »

Frotag wrote: post #63
politelemon wrote: post #20

Too much CSS, possibly. Too much cognitive load, definitely, I do think so. As a whole, modern CSS features feel unintuitive and often require a historical knowledge of the problems this new feature X was trying to solve, which means to me, it's laden with baggage. Some new CSS feature pages on MDN are absolutely gigantic in their explanations, and that means that there is a lot of 'talking' required to overcome its…

> As a whole, modern CSS features feel unintuitive and often require a historical knowledge of the problems this new feature X was trying to solve There's no real way to debug unexpected behavior short of digging through the W3 spec. For example you can't set height / width on inline elements, but you'll never see any error messages or warnings in devtools / IDEs when you try. It doesn't help that tutorials rarely di…

you'll never see any error messages or warnings in devtools / IDEs when you try.

I’ve seem dev tools highlight code that either doesn’t make sense or doesn’t have any affect.

I wonder if something like Stylelint [1] would catch this.

[1]: https://stylelint.io

Re: Is there too much CSS now?

#70

Post by nathias »

ericmcer wrote: post #61
bob1029 wrote: post #21

No. It's finally getting to be reasonable. The hackarounds are being displaced in droves now. Ever since CSS grid became a thing, I dumpstered all of the 3rd party web framework stuff I had been using. Placing elements in the right parts of the viewport (across all target devices) has always been 95% of the reason I consumed 3rd party libraries.

Do you find element placement to be a one and done solution in regards to using grid, flex or table? Or do each have their own use cases? I tend to default to flex for most things because I am very comfortable with it. I guess I find keeping all the css properties in my head for all the different placement solutions cumbersome, flex and especially grid have a huge amount of functionality and custom properties, and I…

flex everything, it behaves much smoother
Post reply on HN