How to Format CSS: Specificity Management, Cascade Layers (@layer), and Stylelint Rules
Master CSS code formatting and architecture: logical property ordering, Cascade Layers (@layer), CSS Custom Properties, and automated Stylelint standards.
Why CSS Architecture Demands Rigorous Formatting
Unlike programming languages with strict compiler type-checks, CSS is a declarative styling engine governed by cascade rules, source order, and selector specificity. Poorly formatted stylesheets with haphazard property ordering and excessive nesting quickly degenerate into unmaintainable specificity wars where developers resort to dangerous !important overrides.
Property Ordering: Concentric vs Alphabetical
The most readable CSS stylesheets follow Concentric / Box-Model ordering, grouping properties from outside in (Positioning -> Box Model -> Typography -> Visuals -> Transitions):
.coshare-card {
/* 1. Positioning & Display Context */
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
/* 2. Box Model & Dimensions */
width: 100%;
max-width: 480px;
padding: 1.5rem;
margin: 0 auto;
/* 3. Typography */
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.5;
color: var(--text-primary);
/* 4. Visual Styles & Backgrounds */
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
/* 5. Transitions & Interactions */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}Formatting Modern Cascade Layers (@layer)
CSS Cascade Layers (@layer) allow developers to control specificity boundaries explicitly. Format layers at the top of your root stylesheet in explicit order of precedence:
/* Declare layer hierarchy upfront */
@layer reset, base, components, utilities;
@layer reset {
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
}
@layer components {
.btn-primary {
background-color: var(--color-primary);
color: #fff;
}
}Formatting CSS Custom Properties & Design Tokens
Group CSS variables inside :root by semantic domain, following kebab-case naming conventions:
:root {
/* Colors */
--color-primary-500: #6366f1;
--color-primary-600: #4f46e5;
/* Semantic Tokens */
--bg-canvas: #090d16;
--bg-surface: #111827;
/* Radii & Spacing */
--radius-sm: 4px;
--radius-md: 8px;
}Modern Native CSS Nesting Formatting
Native CSS nesting (supported across all evergreen browsers) should be limited to a maximum depth of 3 levels to maintain high selector rendering speed:
.navigation-bar {
display: flex;
align-items: center;
& .nav-item {
color: var(--text-muted);
&:hover,
&:focus-visible {
color: var(--text-active);
}
}
}Automating Standards with Stylelint
{
"extends": ["stylelint-config-standard"],
"rules": {
"selector-class-pattern": "^[a-z0-9]+(-[a-z0-9]+)*$",
"max-nesting-depth": 3,
"declaration-block-no-duplicate-properties": true
}
}Code Formatter & Converter Suite
Validate, format, minify, and convert JSON, SQL, YAML, XML, and code dialects directly on your local machine.
Frequently Asked Questions
Should I use tabs or spaces for CSS indentation?
Two spaces is the recognized modern standard across Prettier and Stylelint, offering clean readability in pull requests and compact nesting indentation.
How do I handle vendor prefixes in modern CSS?
Do not write vendor prefixes (`-webkit-`, `-moz-`) manually. Write standard modern CSS and let Autoprefixer inject necessary vendor prefixes during the build pipeline based on your Browserslist targets.
Conclusion
While formatted CSS is essential during local development, it is best practice to compile it to a minified file (stripping out comments, newlines, and spaces) before deploying to your production servers. This reduces file size, decreases bandwidth consumption, and improves page speed metrics.
Related Articles
How to Format HTML: Semantic Hierarchy, Void Elements, and Accessibility Standards
Learn best practices for formatting HTML5 documents: semantic markup structure, void element handling, attribute ordering, and accessibility linting.
Developer ToolsHow to Format JavaScript: AST-Driven Code Formatting, ASI Traps, and Prettier Standards
A comprehensive guide to JavaScript and TypeScript code formatting: AST parsers, Automatic Semicolon Insertion (ASI) edge cases, and Prettier/Biome configurations.
Developer ToolsHow to Format SQL Queries: CTEs, JOIN Alignment, Window Functions, and SQLFluff Standards
Master SQL query formatting: uppercase keyword standards, Common Table Expression (CTE) indentation, JOIN alignment, window functions, and SQLFluff linting.