The Power of CSS Selectors
The article argues that despite some programmers dismissing CSS as merely declarative, CSS selectors are powerful conditional tools that can express complex logic, and explains why methodologies like BEM and OOCSS intentionally limit their use to keep styles maintainable.
There is a worrying trend in programming circles where "real" programmers scoff at CSS, calling it merely a declarative language and not a full‑featured programming language, but this does not diminish CSS's strength.
CSS selectors work like conditional statements; at the most basic level they behave like an if statement that executes when the condition evaluates to true .
Beyond simple conditions, selectors can express more complex relationships using descendant, child, sibling, and adjacent‑sibling combinators, for example:
condition1 > condition2
condition1 ~ condition2
condition2 + condition2
Boolean logic is also possible: AND is implicit, while OR is expressed with commas, and additional pseudo‑classes such as :not() , :nth-child() , and others extend the expressive power, making CSS approach Turing‑completeness in practice.
Nevertheless, developers often deliberately restrict selector power using methodologies like OOCSS, BEM, and SMACSS, limiting selectors to class names to keep CSS simple, modular, and maintainable, while pushing complexity to HTML or template languages.
The existence of template languages (e.g., Smarty, Twig, Mustache, Nunjucks, Handlebars) reinforces this separation: complex logic belongs in the controller or template, not in CSS, ensuring that CSS remains direct and maintainable.
UC Tech Team
We provide high-quality technical articles on client, server, algorithms, testing, data, front-end, and more, including both original and translated content.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.