Smartial Wayback Machine Text Extractor
This article contains 1 images. You will find them at the very end of the article.
This article contains 761 words.
:where :is your at? Weekly links with a CSS flavour - Web Directions
Many developers consider CSS to be difficult (some even consider it broken). And a lot of effort has been expended–frameworks, methodologies, CSS-in-JS approaches–taming, in particular, the at times complex interaction of three distinct, powerful aspects of CSS that work together, in often seemingly abstruse ways, to style an element on a page: the cascade, inheritance (two separate things but often conflated in developers minds) and the dreaded specificity [ominous music plays].
CSS, and the foundations of these ideas are now a quarter of a century old. When we first used CSS on web pages, those pages were pretty simple. And so keeping a mental model of the interactions of cascade, inheritance and specificity wasn’t too challenging.
It was a world before what we might call components (in any sense), and typically web pages and sites were built by individual designer/developers (designers were very likely also the developers), or very small teams (in 1996 a web design team was more or less unheard of) keeping track of the interplay of these foundations of CSS made sense.
As pages and sites have become unimaginably more complex, and much more component based, where the components are developed by different individuals and teams, who may never communicate directly with one another, cascade, inheritance and specificity often cause immense challenges.
A new CSS feature, Cascade Layers, aims to address this. As Miriam Suzanne writes in “A Complete Guide to CSS Cascade Layers“, just published at CSS Tricks,
Cascade layers give CSS authors more direct control over the cascade so we can build more intentionally cascading systems without relying as much on heuristic assumptions that are tied to selection.
Miriam Suzanne: “A Complete Guide to CSS Cascade LayersThis is a sophisticated new feature of CSS, with many implications, and Miriam’s article is long and detailed–but highly recommended.
Cascade Layers at Hover, our CSS conference, online in April
You hopefully won’t be surprised to know that we’re covering Cascade Layers at Hover in April, with Bramus Van Damme. So to get yourself up to speed with this important new feature of CSS, why not come along to Hover – the conference CSS Deserves?
:where :is your <head> at?
Sorry that’s a real dad heading (father of four, apologies, it’s instinctive). Alongside Cascade Layers, we also have some new selectors coming to CSS, some, like :has long long desired by developers. But there’s more coming too, as Mads Stoumann details in this recent article .
new CSS selectors at Hover
Of course we’ll be covering these and other new CSS selectors at Hover, with Kilian Valkhof.
A Small Guide for Naming Stuff in Front-end Code
Over the nearly 30 years I’ve been developing for the Web, how many class names, how many ids have I created? Why is it I feel I’m always returning to this issue every time I build a site?
Even after HTML5 delivered a bunch of new elements to take care of the most common patterns (section, article, footer, header), it’s still an overlooked, but significant part of developing for the Web.
Phil Karlton has famously said that the two hardest things in computer science are naming things and cache invalidation1. That’s still kinda true in front-end development. Naming stuff is hard, and so is changing a class name when your stylesheet is cached.
A Small Guide for Naming Stuff in Front-end CodeSo begins this detailed piece from late last year by Frank M Taylor which covers naming things in CSS (and JavaScript). Not prescriptive, ‘this guide uses words like “favor”, “prefer”, “try”, and “avoid” over “do” and “don’t”’.
Again a really thoughtful, useful piece, one to perhaps stimulate conversation with your team?
Just three pieces this week, but a lot to digest, so I don’t want to overload you.
In 2022 we have a whole series of events for Front End Developers
Across 2022 Web Directions is presenting our series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.
Learn more and register now
Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.
Images:
The images are downsized due to limited space here. The original dimensions may differ.Click on the image to open it on a new tab.
