5 ms·

It's nice to read some positive content about CSS. I personally love CSS. I see CSS as a massive toolbox full of awesome tools, some old, some new, some I use

It's nice to read some positive content about CSS. I personally love CSS. I see CSS as a massive toolbox full of awesome tools, some old, some new, some I use all the time, others I barely know they exist, but it's nice they are there when I need them. It also has improved significantly over the years, it's quite remarkable; transforms, transitions, flex, grid, media queries, I could go on, we even have CSS vars! I've written/styled UI in quite a few ways, and I still much prefer CSS. I even use it for design, I often find it quicker to write a few lines of css than doing things in graphics software. > This is all a way of extending a big “thank you” to the CSS spec authors Seconded! I am very grateful for CSS and everyone who contributed to it.

kroltan 5y ago
I agree, for all its quirks and layers of layout generations, CSS is still mostly a very pleasant experience, especially since it is so comprehensive. Nowadays most of the web-design-y things I do have more CSS than HTML in them, my element trees are shallow and my stylesheets long.
- deleted 5y ago
  [deleted]
- hombre_fatal 5y ago
  How do you keep your CSS in check so that it doesn't just feel like an append-only log of UI tweaks? For this reason I tend to prefer CSS frameworks that give me CSS classes to use in my HTML, as ugly as it might be. I just never found a good abstraction/philosophy to keep my CSS organized. Or to centralize things like margin/padding so that I'm not creating ad-hoc margins/paddings as I need them on every component.
  - codeptualize 5y ago
    For generally append only prevention; Traditionally it was BEM or similar. Now I would use css modules, or an css-in-js like solution depending on the situation. Basically you have to tame the cascading aspects of css and use them with moderation. If you use Typescript you should also check out plugins that will generate type definitions for your CSS, makes it much easier to refactor and remove stuff. As to margins/paddings, basically consistency, you need a way to define and manage your "design tokens" as they are known these days. That can be with SCSS, custom util classes, and/or CSS vars, or indeed util CSS frameworks. You could also use something like https://stitches.dev/ https://stitches.dev/. I am personally not a huge fan of css frameworks as I have not had the best experience maintaining components with long strings of heavily abbreviated classnames everywhere, but I do see why people might like them, they can be very powerful.
  - kroltan 5y ago
    Nowadays I don't do much professional webdev, so I don't deal with as big projects. But I used to use a poor man's BEM, because my team didn't like the aesthetics of the whole double-underscore thing: Every component (usually tied to a $WhicheverFramework counterpart, matching case and all) has a class for it, elements that are part of that component get a class like $Component-$part, and states ("modifiers" in BEM) do not need a prefix. That, and striving to keep the tree small, moving decorations to pseudo-elements when possible, and using CSS grid instead of element-based ones like Bootstrap, means you might get some long CSS rule lists, but the actual amount of selectors is pretty manageable.
westoncb 5y ago
I genuinely hated using CSS each time I tried prior to ~2015. The point where that started changing for me was the introduction of Flexbox; the previously available layout models seemed to have no real coherence or logic behind them, depended on the memorization of disconnected tricks. Even with Flexbox it's taken a number of years using CSS regularly to get to a point where I've now previously encountered most things I need to do which aren't straightforward derivations from the basic rules of behavior (e.g. even something simple like getting absolute positioning relative to immediate parent to work, or how to make arbitrary elements scrollable/non, or how to auto-truncate text with an ellipsis). But at this point, it feels awesomely powerful. I've been awed in recent history at how rapidly I can create even novel/complex UI's; the experience is partly of hitting green lights over and over, improbably (which says something about the less fun stages I had to go through prior). But it's not just that; coming from working with desktop and mobile finite widget set GUI toolkits, the expressiveness via CSS is extensive by comparison (and, separately, the one-way-dataflow/functional-reactive style of development common in modern web dev feels excellent for connecting components to backing models). It's also just quite a bit of fun. Combine the wide-ranging expressiveness with rapid-feedback workflows like editing from browser dev tools (or with HMR and live-updating through webpack)—writing CSS and watching sleek, novel UIs come together can be pretty enjoyable these days. Could a better system be designed so that I wouldn't have had to go through the long journey I did, while still ending with something highly expressive and great for experts to use? I often wonder but haven't been able to think of an alternate design that would be a fundamental improvement.
- rambambram 5y ago
  > It's also just quite a bit of fun. Agree! I always liked CSS, it got better and better, and the real fun for me started when I found out all the different color names. For one little side project I forced myself to only use color names, it turned out pretty nice.
- codeptualize 5y ago
  Ah yeah good old floats. It was all about knowing the clear tricks, not sure I could still do it these days haha. Agree, it was a lot harder. But even that was a lot easier then making layouts with tables, or frames haha, so I didn’t mind, it already felt like a massive improvement. But yeah flex is great, I also really enjoy grid. Similar tricky to get started with but insanely powerful. You describe it very well; that expressiveness is what’s really enjoyable, and pretty much impossible to find elsewhere. I think it’s maybe just a professional tool, hard to start with but once you get over the initial hurtle it becomes very powerful. In that sense it’s not that different from learning any programming language. It’s a good question if it could be easier, I’ve also done that exercise of “how else” I think the problem might be the complexity and messiness of ui and layout, it’s not css, it’s the layout. I think it could and will be easier though, not as something totally different, but simply improving what’s there; basically continuing the path it’s already been on for the past decades. I’m truly enjoying it today and excited for what’s to come!

kroltan 5y ago

I agree, for all its quirks and layers of layout generations, CSS is still mostly a very pleasant experience, especially since it is so comprehensive. Nowadays most of the web-design-y things I do have more CSS than HTML in them, my element trees are shallow and my stylesheets long.

deleted 5y ago
[deleted]
hombre_fatal 5y ago
How do you keep your CSS in check so that it doesn't just feel like an append-only log of UI tweaks? For this reason I tend to prefer CSS frameworks that give me CSS classes to use in my HTML, as ugly as it might be. I just never found a good abstraction/philosophy to keep my CSS organized. Or to centralize things like margin/padding so that I'm not creating ad-hoc margins/paddings as I need them on every component.
- codeptualize 5y ago
  For generally append only prevention; Traditionally it was BEM or similar. Now I would use css modules, or an css-in-js like solution depending on the situation. Basically you have to tame the cascading aspects of css and use them with moderation. If you use Typescript you should also check out plugins that will generate type definitions for your CSS, makes it much easier to refactor and remove stuff. As to margins/paddings, basically consistency, you need a way to define and manage your "design tokens" as they are known these days. That can be with SCSS, custom util classes, and/or CSS vars, or indeed util CSS frameworks. You could also use something like https://stitches.dev/ https://stitches.dev/. I am personally not a huge fan of css frameworks as I have not had the best experience maintaining components with long strings of heavily abbreviated classnames everywhere, but I do see why people might like them, they can be very powerful.
- kroltan 5y ago
  Nowadays I don't do much professional webdev, so I don't deal with as big projects. But I used to use a poor man's BEM, because my team didn't like the aesthetics of the whole double-underscore thing: Every component (usually tied to a $WhicheverFramework counterpart, matching case and all) has a class for it, elements that are part of that component get a class like $Component-$part, and states ("modifiers" in BEM) do not need a prefix. That, and striving to keep the tree small, moving decorations to pseudo-elements when possible, and using CSS grid instead of element-based ones like Bootstrap, means you might get some long CSS rule lists, but the actual amount of selectors is pretty manageable.

westoncb 5y ago

I genuinely hated using CSS each time I tried prior to ~2015. The point where that started changing for me was the introduction of Flexbox; the previously available layout models seemed to have no real coherence or logic behind them, depended on the memorization of disconnected tricks. Even with Flexbox it's taken a number of years using CSS regularly to get to a point where I've now previously encountered most things I need to do which aren't straightforward derivations from the basic rules of behavior (e.g. even something simple like getting absolute positioning relative to immediate parent to work, or how to make arbitrary elements scrollable/non, or how to auto-truncate text with an ellipsis). But at this point, it feels awesomely powerful. I've been awed in recent history at how rapidly I can create even novel/complex UI's; the experience is partly of hitting green lights over and over, improbably (which says something about the less fun stages I had to go through prior). But it's not just that; coming from working with desktop and mobile finite widget set GUI toolkits, the expressiveness via CSS is extensive by comparison (and, separately, the one-way-dataflow/functional-reactive style of development common in modern web dev feels excellent for connecting components to backing models). It's also just quite a bit of fun. Combine the wide-ranging expressiveness with rapid-feedback workflows like editing from browser dev tools (or with HMR and live-updating through webpack)—writing CSS and watching sleek, novel UIs come together can be pretty enjoyable these days. Could a better system be designed so that I wouldn't have had to go through the long journey I did, while still ending with something highly expressive and great for experts to use? I often wonder but haven't been able to think of an alternate design that would be a fundamental improvement.

rambambram 5y ago
> It's also just quite a bit of fun. Agree! I always liked CSS, it got better and better, and the real fun for me started when I found out all the different color names. For one little side project I forced myself to only use color names, it turned out pretty nice.
codeptualize 5y ago
Ah yeah good old floats. It was all about knowing the clear tricks, not sure I could still do it these days haha. Agree, it was a lot harder. But even that was a lot easier then making layouts with tables, or frames haha, so I didn’t mind, it already felt like a massive improvement. But yeah flex is great, I also really enjoy grid. Similar tricky to get started with but insanely powerful. You describe it very well; that expressiveness is what’s really enjoyable, and pretty much impossible to find elsewhere. I think it’s maybe just a professional tool, hard to start with but once you get over the initial hurtle it becomes very powerful. In that sense it’s not that different from learning any programming language. It’s a good question if it could be easier, I’ve also done that exercise of “how else” I think the problem might be the complexity and messiness of ui and layout, it’s not css, it’s the layout. I think it could and will be easier though, not as something totally different, but simply improving what’s there; basically continuing the path it’s already been on for the past decades. I’m truly enjoying it today and excited for what’s to come!