What's something about the CSS or the way you think about it that's completely different compared to 3 years ago? Did you change a habit, approach, or technique? Think of layout, usage of custom properties, how you work with color, etc.
Comments
Log in with your Bluesky account to leave a comment
Moved away from SCSS, now fully in on PostCSS and heavily reliant on using custom properties for theming. Wouldn't be without fluid type and space scales now either thanks to https://utopia.fyi/
I see something new and don't think "shit, I'll never be able to use that" and forget about it. Instead I think, "nice, I'll be able to use this comfortably in a little bit so will start messing with it now".
I’ve starting using inline styles to pass overrides to our design system CSS framework (via custom props). It makes the system a lot more useable for unforeseen contexts without having to create a bunch of classes to account for every possible use case. Ex: https://pitviper.turquoise.health/components/meters/
This was my first thought as well. Using a CSS API for customizing components has so many benefits. I've been planning to write an article on it but never got around to it.
I almost never use logical properties. When I was to design a website for different types of languages, yes. And then many more things need to be addressed. But it is weird to make this the default. Using "margin-top" etc. is just fine.
Even if you aren’t asked to build something in Arabic or Persian, a user can choose to translate a website you’ve built. You can help by using logical properties.
Creating a Style API explicitly from the get-go has changed the way I approach CSS. (i.e. HTML attributes, JavaScript Properties, and (registered) Custom Properties)
This started when I focused on creating CSS libraries for design systems. Also, my focus on Shadow DOM has made my work classless.
From: you can only animate a few values of few properties
To: you can animate everything even half a value of a property thanks to @property, and you can animate height: auto, and we have animation-composition, and scroll-driven animation, etc
reminds me when es5 moved to es6; JavaScript used to look so different. now CSS sits at the same table with nesting, custom props, logical props, and new @rules drastically changing the aesthetics.
2. biggest outcome; write less, reach more users where they are
ES6 changed my world and finally got me to stop doing all sorts of stupid in CSS just to avoid writing JS. It made that easy because a lot of things were suddenly easy. Change has been a lot more gradual with CSS.
Look for opportunities to use grid. Using more progressive enhancement and some of the new one liner like tricks (e.g. accent-color) to do more with less JS
I’ve been Tailwind-sober for a little over three years, so there’s that haha.
Embracing the extensibility of the language through custom properties, CSS shadow parts, and custom state. This is where CSS is going (style queries, mixins). Being able to create a custom DSL for our design systems.
As a developer who's never learned CSS over the years, I find that custom properties, parts, and shadow DOM are much more manageable and empowering than CSS frameworks. They provide the tools I need and I have access to all the latest CSS improvements when they land. And, I'm learning CSS.
Biggest shift for me was using custom properties much more proactively to define "component APIs". So any aspect that *might* be dynamic gets a namespaced var with a default fallback. Then I can set that value directly from a parent element and have it inherited
just started adopting layers recently, since it's been a baseline feature for a while now, and its really changed how i structure my css. before, my global were kind of cluttered w/ resets and some nice defaults, but now it's way more readable and predictable.
I've started using grid and subgrid more often. Before only flexbox. Container queries and cascade layers rock! I use CSS variables with fallbacks to make components easily customizable from outside. Always write CSS transitions and animations now instead of framework stuff (like Angular animations)
Actually taking the time to create a coherent "style system" at the start of the project.
This means declaring colors for Primary, success, warning and errors and creating color ranges for these. Also defining color for text levels and separators.
When it comes to layout, thanks to container queries and better understanding of flex/grid algorithms, I build much more flexible layouts now, where the content defines the breakpoints. I try to avoid defining fixed sizes for elements, fonts, etc.
Comments
I tried dabbling with UnoCSS but I think that these kinds of regex-soup DSLs are a mistake.
Instead of
Page 1
using:
Page 1
and styling using the attribute selector
When I see “left”, “right”, “width” or “height“ in CSS now it looks like a bug to me.
I once got in a bit of trouble for demoing "free RTL" because the web agency I was contracting for had sold it as a value-add
https://dbushell.com/2021/02/02/changing-css-for-good-logical-properties-and-values/
https://www.alwaystwisted.com/articles/css-logical-properties-and-sass
🙏🖤
I can't imagine I'd ever design a layout with the intention of using it with both horizonal and vertical flows?
is it mostly a semantic difference or why should we care? 🤔🙂
I just have never been asked to build something in Arabic or Persian.
if I were, I wouldn't trust that it's as simple as reversing the flow of elements - I'm sure there are other cultural/design conventions?
I'd ask for a consultant 🙂
This started when I focused on creating CSS libraries for design systems. Also, my focus on Shadow DOM has made my work classless.
To: you can animate everything even half a value of a property thanks to @property, and you can animate height: auto, and we have animation-composition, and scroll-driven animation, etc
A few years ago it was typical to use tools like css-in-js solutions, css preprocesses, and tailwind.
Tailwind remains popular, but a lot of the styling that used to require a preprocessor or JS is now possible in plain CSS.
reminds me when es5 moved to es6; JavaScript used to look so different. now CSS sits at the same table with nesting, custom props, logical props, and new @rules drastically changing the aesthetics.
2. biggest outcome; write less, reach more users where they are
ES6 changed my world and finally got me to stop doing all sorts of stupid in CSS just to avoid writing JS. It made that easy because a lot of things were suddenly easy. Change has been a lot more gradual with CSS.
Embracing the extensibility of the language through custom properties, CSS shadow parts, and custom state. This is where CSS is going (style queries, mixins). Being able to create a custom DSL for our design systems.
same btw 😄
but the hype started in '22 😏
`.foo--theme-blue` has become `.foo[data-theme="blue"]`
Makes much more sense to use key/value construct for modifiers.
Can I read more about the concept somewhere?
Thank you for finding it.
I'm definitely going to dig into this.
Currently working on a project with Lit components, and I use BEM just by habit.
CEA looks like a good upgrade.
😔
I feel this elegantly solves the problems that motivated things like BEM and tailwind
now you just write CSS and layer your overrides - really simple 🙌
even load bootstrap into a layer and have none of the problems it was criticized for creating 💁♂️
- Started using some Tailwind
- Built many utilities (think mixins)
- Use those utilities in many areas
- Took advantage of CSS Layers
- And more
This means declaring colors for Primary, success, warning and errors and creating color ranges for these. Also defining color for text levels and separators.
Makes fighting the UI color demons a lot easier.