Optimizing CSS can be challenging, especially when the CSS selector profiling in Chrome may distort results. It is advisable not to focus on CSS selectors unless your CSS file contains numerous unused rules, adding unnecessary bulk.

Prioritize resolving other issues before delving into selector optimization.

How to build web pages so they work in HTML first: starting with HTML, extra styles and features, using JavaScript.

Do not build your service as a single-page application (SPA). This is where the loading of pages within your service is handled by JavaScript, rather than the browser.
Single page applications rarely bring benefits and can make the service inaccessible.

In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty 0 characters all lined up in a row).

But the width of the 0 character differs from font to font. So when our web font was swapped, the width of 1ch changed, which impacted our layout

See also CSS tricks

A tree view (collapsible list) can be created using only html and css, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.

A small tool to compute your fluid typography clamp() instruction

An evergreen CSS course and reference to level up your web styling expertise.

It might seem that such selectors would be a speed problem. However, the selector matching performance is fast. The CSS declarations are so friendly to compression algorithms that the effort required to optimise a CSS selector is usually better spent working on other parts of your application with a greater return on investment.

Don’t use runtime CSS-in-JS if you care about the load performance of your site. Simply less JS = Faster Site. There isn’t much we can do about it. But if you want to see some numbers, continue reading.

Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a nice working carousel — one that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive

JavaScript is your behavior layer; the way to add interactivity to your sites, to provide a slick and delightful user experience, to make everything fast and easy and clean. But at some point everything changed: the tail started to wag the dog instead and development became Javascript-first. We'll talk about how you maybe shouldn't rely on JS as much as you're told to, and some practical strategies for how to build sites without reaching for a JS framework as first, last, and only tool for making the web happen.

content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content.

Un précis de vocabulaire pour se rappeler des termes CSS.

A wonderful pen by Vincent Valentin

[…] who could define a CSS version? The CSS working group doesn’t seem to feel it has time for it.

No class names, no frameworks, just semantic HTML and you're done. Simple, reusable components, for a clean looking design that doesn't get in the way.

The prefers-reduced-data media feature is used to detect if the user has a preference for being served alternate content that uses less data for the page to be rendered.

In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on occasion and finally consider techniques that we can employ to mitigate them.

To make sure your animations don’t cause performance issues, consider the impact of animating a given CSS property. Avoid layout recalculations and minimize repaints. Where you can, stick to changing transforms and opacity.