41–50 of 120 posts
The best resource that will teach you systematic thinking and give you a proper foundation for how to use CSS is https://every-layout.dev/ . [0] Really enjoyable read and it takes you through the thinking process. [0] Not recommended for absolute beginners
$69 for full access (one-time payment AFAICT). Must be worth it if web design is your profession.
Is there a language that compiles to CSS but excludes the decades of cruft that have accumulated in CSS? Something that just exposes a few key primitives and jettisons the rest even if that means it doesn't handle some extreme edge cases?
I don't see why 0 should be treated as special value. Initial should be used if meant to "disable" it. What if you want margin: 5px as the general rule and margin: 10px on the last element. Is 10px a disabling selector?
To quote the article referenced in the article: "I call this technique disabling selector since the li:last-child selector disables the previous selector's rule."
So the 10px margin for the last element is a disabling selector.
We do this at my current job and it's honestly the easiest time I've ever had with CSS.
Interesting way to think – we use additive color (RGB) on web so why not additive styling? But in practice while creating interfaces, we're making broad brush strokes, then accommodating exceptions, like :last-child. Also curious about how browsers prioritize the render stages – does every style get applied sequentially (hence cascading), or do pseudo selectors get applied later during the paint?
Sounds confused. I'm not sure what "additive styling" means, but I'm sure it doesn't mean the same thing as "additive color". "Kids like jelly beans, so why not lima beans?"
The reason we use additive color on the web is that it reflects the display technology, which is a bunch of independent light emitters. The web has nothing to do with it, except that the web is viewed on computers.
Earlier quoted context omitted.
I disagree. If a 5px margin is the general rule, then I would argue it's cleaner to apply it generally, and then apply the 10px margin exceptions in separate rules. - When special cases are added or removed, the general rule won't have to be adjusted, just code that handles the special cases. - On the other hand, a single general rule that specifically avoids application to multiple exceptional cases will be pretty l…
plus it's called "cascading style sheets". you're going against the current if everything wants to be so specific. This is one of my gripes with styled components.. it makes it easy to forget the power of cascading rules!
Is there a language that compiles to CSS but excludes the decades of cruft that have accumulated in CSS? Something that just exposes a few key primitives and jettisons the rest even if that means it doesn't handle some extreme edge cases?
Like what?
I assume there's some CSS that doesn't have a use anymore but thinking about layout, we don't need floats for page layout but that was basically a hack, float is still useful for its original purpose.
Basically, the CSS spec isn't full of cruft but there are a lot of CSS practices that are no longer needed.
Earlier quoted context omitted.
plus it's called "cascading style sheets". you're going against the current if everything wants to be so specific. This is one of my gripes with styled components.. it makes it easy to forget the power of cascading rules!
I think that forgetting the power of the cascade is part of the point, maybe the main point.
- eliminating the chance of colliding CSS class names when composing multiple micro-clients together
- simplifying builds, especially cascading builds (library + client). It's nice when styles are covered entirely by the JS build (no separate CSS/SCSS input or output files or separate build pipelines).
Yes, there are other complexities/problems that styled-components adds (including the likelihood that devs will forget about the cascade)... so I wouldn't recommend it for every case. But it does have its place.
I think CSS is approaching the point where it's equivalent to assembly because it's impossible to keep up and write good CSS. It's no longer easy to do it by hand which is why there is a whole ecosystem of tooling that handles CSS. Not to mention that CSS is essentially platform-specific due to differences between chrome, safari and firefox.
I legitimately can't think of anything that has made it more difficult to write by hand in the last 15 or so years; if anything it's never been easier! Building complex software is...complex, and frameworks and tools in the CSS world are no different than reaching for an MVC framework or ORM.
There's minor quirks between browsers, but it's a far cry from being platform-specific, and a huge improvement on the incompatibilities of yore.
Earlier quoted context omitted.
While "Axiomatic CSS" per se has (unfortunately) not quite (yet?) gone mainstream, its origins -- see https://every-layout.dev -- are a profoundly excellent resource, and have been highly influential.
That site is black on white¹, and has no other colors, images, fancy borders, nor any other obvious “design”—and yet it is remarkably pleasant to look at, even beautiful. The site sells the authors’ ideas; they obviously know something. (Plus no doorslams, cookie warnings, or other annoyances. And an RSS feed.) [1] Really very dark grey on very light grey.
† The only problem is that the atrocious #fafafa on #050505 is made a whole lot worse because there aren't a bunch of even worse things distracting you from it.