Skip to main content
A whole cascade of layers

A whole cascade of layers

I really enjoyed Dave Rupert’s Modern alternatives to BEM, which concludes with a link to my redesign. So let’s talk about my seven-layer burrito of styles – what he calls SBRDFLT. What’s that all about? TL;DR I don’t know yet. Some day I hope to write a longer post about my overall approach to CSS. My methodology? Sadly, I don’t have an acronym for it yet. The rough summary is use the tools provided to write meaningful code. I think that’s also what Dave is getting at with his post: While SBRDFLT doesn’t exactly roll off the tongue (”S-Bird Felt”?), maybe it’s time we break out of catchy three letter acronyms and focus on finding good scalable architecture patterns instead. Setting aside the bigger questions, Dave’s ‘SBRDFLT’ acronym is based on the ‘layers’ I expose in the layer-selection settings below. Roughly, they imply: @layer spec, browser, reset, default, features, layout, theme; But you won’t find that ‘SBRDFLT’ layer list anywhere in my code. The first two ‘layers’ are fundamental aspects of the web itself, and I have an additional sub-layer that I’ve been keeping secret. Still, let’s take that list supposed-layer-by-supposed-layer. What have I actually implemented, and what’s the thinking (if any) behind this particular organization? Note:Cascade Layers allow you to specify exactly which CSS selectors should take priority in any given situation. Later layers will override earlier layers, regardless of the specificity used within each layer. For more info, check out my Complete Guide to Cascade Layers on CSS Tricks. The first two (implicit) layers The first two layers – ‘spec’ and ‘browser’ – represent styles that exist on every site, before we even get started. These aren’t technically ‘cascade layers’ as defined by the new @layer syntax, but they work in a similar way, and so I’ve exposed them using similar language. The CSS specification defines an initial value for every property in CSS. The initial display is inline, The initial color is CanvasText, and so on. Initial values are only applied when no other value is specified through cascade or inheritance. We can think of them as an initial layer that all other styles will override. You might be thinking that doesn’t sound right – divs default to block display, and links default to a blue color. And you’re right! The browser provides a second layer of defaults called user agent style sheets. This is where paragraphs get their spacing, headings get bigger and bolder text, and an 8px margin is added to the body. Initial (spec) values are defined per-property, the same across all elements. User Agent (browser) styles are defined per-element, to provide differentiation and readability. The spec styles aren’t part of any actual style sheet in the cascade, but the browser styles live in a Cascade Origin below our ‘author’ styles. Since cascade layers were designed to work like origins-within-origins, it’s fair to flip that around. We can think of user agent styles as another ‘layer’ below all our layers. Both initial values and user agent styles are always there, on every website in the world. But in order to see what they look like,  » Read More

Like to keep reading?

This article first appeared on If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?


Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.