CSS Layers - Tackling specificity in CSS

#css #programming #tutorial #react

Do you know that:

There are 3 different layers in CSS that govern how all styles work?

Browser (also known as user agent) styles
User styles
Author styles

Browser styles are the default styles applied to your browser. This is why buttons in Chrome and Safari look different. The styles found in the browser layer are different between browsers and give each browser a unique look.

The next layer is user styles which is not really something that you have to worry about. These are generally custom styles that users can write and inject into their browser, but that is not really supported anymore by browsers. There may be some browser settings that users can change which will add styles to this layer, but for the most part this layer can be completely ignored.

Finally, we come to the author layer. This is the layer you are most familiar with since every piece of CSS code you write falls within this layer.

The reason these layers are separate is because it makes overwriting the code defined in browser styles and user styles very easy since layers define their own hierarchy that completely ignores specificity.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.