I found Lee Robinson’s perspective on How I’m Writing CSS in 2024 to be quite enjoyable. Instead of diving straight into tools and syntax, it prioritizes the user:
What does a great experience look like when loading stylesheets on a website?
Stylesheets should load quickly with small file sizes
Stylesheets should not re-download unless changed with proper caching headers
Page content should have minimal or no layout shifts
Fonts should load quickly and minimize layout shifts
I agree with this! The third point, and to some extent the fourth, are more related to JavaScript than CSS, but it’s a good starting point. I would also add “The page styles should not interfere with default accessibility”.
After considering these factors, the developer experience comes into play:
How can the developer experience of the styling tools we use help us create a better user experience?
Remove unused styles, minify, and compress CSS for smaller file sizes
Generate hashed file names for safe, immutable caching
Bundle CSS files together to reduce network requests
Avoid naming collisions to prevent visual regressions
How can the developer experience of the styling tools we use help us write more maintainable, enjoyable CSS?
Easily delete styles when removing corresponding UI code
Adhere to a design system or set of themes easily
Receive editor feedback with TypeScript support, autocompletion, and linting
Get tooling feedback in-editor to prevent errors (type checking, linting)
I appreciate how the developer experience focuses on making tasks easier that the user experience demands. I want all those features! Although I still have reservations about dealing with unused styles. Detecting unused styles accurately is challenging, and I’m cautious about tools making those decisions.
Lee’s top recommendations are CSS Modules, Tailwind, or StyleX (or vanilla CSS for simpler projects). These suggestions seem fair based on his experience and achieve the goals he outlined. Personally, I prefer the CSS Modules approach. It’s mostly vanilla CSS but with excellent scoping, integrates well with components, and is widely used.
Switching gears to the real-world application of writing CSS, Ahmad Shadeed delves deep into dissecting the TechCrunch Layout using modern techniques.
While it may seem like a simple three-column layout, each column presents unique challenges. The first is fixed, the main content is fluid with a maximum width, nested grids, and an overall maximum width. The third column involves absolute positioning, not to mention the five major breakpoints and complex footer. Ahmad explores five different approaches, settling on a CSS grid technique that he found easy to implement, though the column declarations suggest it was only easy after multiple iterations.
Ahmad’s ability to distill a complex layout into a few lines of CSS is truly remarkable. CSS is undeniably powerful, but is it easier? Geoff Graham believes so, citing that grouping styles, centering, translation, and spacing are all easier with CSS. Geoff mentions more benefits, emphasizing that CSS is easier to understand and execute.
Roman Komarov discusses The Shrinkwrap Problem, which may seem niche but poses an intriguing layout challenge. When content wraps, the element occupies all available width, leading to unexpected visual effects. Roman explores solutions like anchor positioning, a unique approach to address this issue. Despite the complexity, the use-cases Roman presents are practical and straightforward.
David Bushell’s article on button-specific CSS styles is both fun and enlightening.
Have you ever tapped repeatedly on a button only to unexpectedly zoom in on the page? This issue, seen in rewind and fast-forward buttons on audio players, can be resolved with touch-action.
David presents four other solutions that may have escaped your consideration.
