-
We really can use a full range of selectors: - Element types for global defaults - Classes/attrs for reusable patterns & components - IDs for truly one-off layout elements (Reasonably) Nested selectors are also ok. CSS was designed to work that way.Permalink On twitter.com
♻️ 20 Retweets ❤️ 95 Favorites Mood 0
-
I actually think the main cascade limitation is *too few* layers of origin/specificity – not too many. Flat (single-class-for-everything) selector conventions cause more problems: - Only a single (cluttered)Permalink On twitter.com
.classnamespace - Source order is everything, & that's dangerous… -
Frameworks load component-styles in unpredictable order. Oops! So we've lost control of every tool in the cascade, which was designed to help us balance concerns: - Origins to balance authority - Specificity to balance global defaults, repeatable patterns, & specific one-offsPermalink On twitter.com
-
Each layer overrides the previous, so that more specifically targeted styles override broad patterns. That's the fundamental rule of designing in systems. Design Systems. Broad strokes, used to create patterns, with individual component variations. CSS is a Design System System.On twitter.com
-
When we embrace the cascade, we actually get… - A number of namespaces to work in: tags, classes, attributes, & IDs - We can nest & combine them, so they are not "all global" - Each custom attribute creates a new custom namespace, which is great for pattern variationsPermalink On twitter.com
-
All design is contextual. all design is relationships and side-effects. On top of that, CSS fails silently. Attempting a "functional" approach in that context is meaningless. We cannot and should not pretend that elements of design can usefully exist in isolation.Permalink On twitter.com