Who ordered the scrambled brains?

I’ve felt for a long time that CSS is a complex technology worthy of study and careful design. Not enough attention is given to advanced concepts like specificity, stacking contexts, selector performance, accessibility, maintainability and opinionated code design, while topics like animations and media queries receive disproportionate attention. Anyway, part of developing CSS expertise requires understanding the terminology. I’ve compiled the major terms from various specifications here.

• All constructs are called Statements.
• Valid Statements begin with non-whitespace, end with closing brace or semi-colon.
• All Valid Statements are at-rules and/or containers for nested statements.
• at-rules that contain nested statements: @media, @document.
• Other at-rules: @import, @charset.
• Remaining nested statements are Rule Sets (aka Rules).
• Rule Sets consist of a Selector Group and a Declaration Block.
• A Selector Group consists of a comma-separated list of Selectors.
• A Contextual Selector consists of a chain of Simple Selectors and Combinators.
  • Combinators are whitespace, >, and +.
• The elements in the document tree that match a Selector are that Selector’s Subjects.
• A Simple Selector begins with a Type or optionally the Universal Selector *. If it is omitted, the Universal Selector applies. Optionally following this are Attribute Selectors, ID Selectors, or Pseudo-Classes. (The period notation is a shortcut Attribute Selector. See below.) Finally, an optional Pseudo-element may be added.
  • Type examples from an HTML document are body, p, div.
• ID Selectors are denoted by #.
• Pseudo-classes are denoted by : and include Link pseudo-classes, Dynamic pseudo-classes, the first-child psuedo-class and the Lang pseudo-class.
  • Link consists of link and visited.
  • Dynamic consists of active, hover, and focus.
  • Lang … is complicated.
• Pseudo-elements represent actual content containers, as opposed to representing mere alternate states.
• Attribute Selectors are enclosed in square brackets and include the attribute name, and optionally a match operator (not official term) and value. Without a match operator and value, the selector matches any “set” value.
  • Match operators include = (exact match), ~= (list of space-separated values to match exactly), and |= (hyphen-separated list of values to match beginning).
  • The period notation is a shortcut for space-separated matching against the “class” attribute, i.e. .value is equivalent to [class~="value"].
• A Declaration Block consists of open/close braces, and semi-colon-separated list of Declarations.
• Declarations consist of a colon-separated Property-Value pair.

Follow me on Twitter for the latest updates, and make sure to check out my community opinion social networking project, Blocvox.