CSS

CSS (Cascading Style Sheets) is a building block of the Web platform.

CSS has had a long history from its inception until today [eev.ee, css-timeline.vercel.app].

Cascade

There may be conflicting CSS rules (coming from different origins). Which rules have a higher precedence over others in that case is strictly defined as follows (lowest to highest precedence). [MDN, MDN, web.dev]

1. User agent stylesheets
2. User stylesheets
3. Author stylesheets
4. Inline style
5. @keyframe animations
6. !important author stylesheets
7. !important inline style
8. !important user stylesheets
9. !important user agent stylesheets
10. Transitions

Conflicting rules within a group seen above are resolved as follows (highest to lowest precedence).

1. Layers
2. Specificity
3. Scope proximity [spec]
4. Order of appearance

Custom Properties

• developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
• developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#values_in_javascript
• developer.mozilla.org/en-US/docs/Web/CSS/--*
• w3c.github.io/csswg-drafts/css-variables

@property

The @property at-rule is used to register custom properties and thus allowing for property type checking, setting default values, and [defining] whether a property can inherit values or not [MDN, css-tricks.com, web.dev, caniuse]. CSS supports several types [MDN, spec].

Using the CSS Properties and Values API, custom properties can also be registered with JavaScript [MDN].

[W]hen animating registered custom properties, they prevent hardware acceleration for properties that rely on them [bram.us, drafts.css-houdini.org].

CSS Value Functions

CSS provides many value functions that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value. [MDN]

CSS has several math functions, some of them are still experimental [MDN, W3].

Both url() [MDN] and src() can be used to point to an (external) resource. url() can be written with and without quotes in it while src() enforces quotes. src(), however, can be used with custom properties (e.g. src(var(--image-url))) while src() cannot. Browsers do not seem to support src(), yet. [spec]

Methodologies

• BEM (block, element, modifier).
• CUBE CSS (composition, utilities, block, exception).
• SMACSS (Scalable and Modular Architecture for CSS).
• OOCSS (object oriented CSS).

Scope & Encapsulation

CSS selectors are globally scoped and apply to all matching elements. That may lead to collisions and can make larger projects complex to maintain. The methodologies try to improve that situation. But there are ways to completely isolate CSS rules so that they cannot interfere with each other. The goal is usually to achieve styling that is only applied to a certain component but to nothing else. As a result, there are no more collisions, and naming of classes is only bound to a single component.

• The Shadow DOM is a mechanism to separate the markup and style of separate web components from each other. It provides a strict encapsulation of the styling. The Shadow DOM, for example, is used by web component libraries. [MDN, javascript.info, lit.dev, open-wc.org]

• The @scope rule allows certain styles to only apply to a specific scope. A scope is defined as a specific element including its children, and optionally only down to certain other child elements. It therefore only applies to a subtree of a document. [MDN, MDN, caniuse]. spec, chrome-dev, keithjgrant.com, Implementor status [chromestatus.com, mozilla/standards-positions#472, WebKit/standards-positions#13]. There have been several older initiatives to add scoping to the CSS specification before [css.oddbird.net, whatwg/html#552, W3].

• Scoped CSS is the approach that some JavaScript SPA frameworks use. They usually work by adding a component-specific attribute to both the DOM and the CSS selectors. That way, styling cannot leak outside the component itself. [vue-loader.vuejs.org, angular.io, svelte.dev]

• CSS Modules allow importing a special CSS format directly into JavaScript where specific rule sets can be injected into the resulting HTML. During a build step, the class names will be changed to something unique and applied to the DOM. [css-modules/css-modules, css-modules/icss, madyankin/postcss-modules]

• Styled Components is an extended version of CSS Modules. The styling is defined directly in the JavaScript code, usually as a string or as an object. Hence, this approach is often called "CSS in JavaScript". The styling is attached to a certain element (or component) and then used itself as a wrapper element. There are several libraries which mostly work similarly. [styled-components/styled-components, andreipfeiffer/css-in-js]. Runtime CSS in JS may have a negative impact on performance [dev.to/srmagura].

CSS Framework

A CSS Framework is a collection of stylings that can be applied to any website. The framework may also provide its own components that can be used with CSS classes. And some frameworks also contain JavaScript functionality–often to improve accessibility. There are many different CSS frameworks to choose from. [Wikipedia, troxler/awesome-css-frameworks]