4 ms·

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

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.

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.