CSS conventions, layout systems, and modern patterns: predictable styles through low specificity and explicit cascade control. Invoke whenever task involves any interaction with CSS code — writing, reviewing, refactoring, debugging, or understanding stylesheets, SCSS, layout, or responsive design.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
CSS conventions, layout systems, and modern patterns: predictable styles through low specificity and explicit cascade control. Invoke whenever task involves any interaction with CSS code — writing, reviewing, refactoring, debugging, or understanding stylesheets, SCSS, layout, or responsive design.
CSS
Predictability is the highest CSS virtue. If your styles require !important to work, restructure the cascade.
CSS rewards explicit, low-specificity selectors and intentional cascade ordering. Prefer boring, readable patterns over
clever one-liners.
Container-driven — Container queries, cqi/cqw units: component adapts to parent
Viewport-driven — Media queries, vw/vh/dvh: page-level layout changes
User preference — prefers-* media queries: color scheme, motion, contrast
Core Rules
Mobile-first — default styles for small screens, enhance upward
Content-driven breakpoints — let content decide, not device sizes
rem for breakpoints: @media (width >= 45rem) not (min-width: 768px)
Use modern range syntax: @media (768px <= width < 1024px)
Logical properties for layout: margin-inline-start not margin-left
Container queries for component-level adaptation; media queries only for viewport-dependent elements (nav, header)
Respect user preferences: prefers-reduced-motion, prefers-color-scheme, prefers-contrast
Single container max-width pattern: width: min(100% - 2rem, 75rem); margin-inline: auto — avoid multiple max-width
values at different breakpoints
Fluid Sizing
clamp(min, preferred, max) for fonts, spacing, and container widths
Build a fluid type scale with custom properties: --step-0: clamp(1rem, 0.5rem + 1.5vw, 1.25rem)
Never use vw alone for font size — it blows up on large screens; always pair with clamp() and rem
Use cqi instead of vw for container-scoped fluid values
Logical Properties
Use logical properties for layout-sensitive values (margins, padding, borders, text alignment, positioning offsets).
Physical properties are fine for visual effects not affected by writing direction (e.g., box-shadow offsets).
Color scheme: declare color-scheme: light dark on :root and use @media (prefers-color-scheme: dark) for
overrides
Reduced motion: either remove motion in prefers-reduced-motion: reduce or add motion only in
prefers-reduced-motion: no-preference (progressive enhancement approach)
High contrast: @media (prefers-contrast: more)
Interaction: @media (hover: hover) for hover effects on capable devices; @media (pointer: coarse) for touch
targets (min 44px)
Use aspect-ratio + object-fit: cover for hero images
The :has() Selector
Select elements based on descendants or siblings — the "parent selector."
Anchor to specific elements, not body, :root, or * — broad anchors force expensive re-evaluation on every DOM
change
Use direct child (>) or sibling (+, ~) combinators inside :has() to limit traversal scope
Cannot nest :has() inside :has()
Pseudo-elements are not valid inside :has()
.layout:has(> .sidebar-open) (good) not body:has(.sidebar-open) (bad)
Custom Properties
Define design tokens on :root — scope overrides to components
Semantic naming: --color-text-primary not --dark-gray
Use kebab-case; prefix with category: --color-, --spacing-, --font-
Provide fallbacks for component-level variables: var(--button-bg, var(--color-primary))
Custom properties are case-sensitive — --my-color differs from --My-Color
Custom properties inherit by default (unlike most CSS properties)
Use @property for typed, animatable custom properties — enables type checking (invalid values fall back to
initial-value), controlled inheritance (inherits: false), and transitions on custom properties
View Transitions
view-transition-name must be unique per page at transition time
Keep transitions short — 200-400ms for UI, longer for page-level
Always respect prefers-reduced-motion: reduce for view transitions
Same-document (SPA): document.startViewTransition(() => { /* update DOM */ })
Named transitions target specific elements via ::view-transition-group(name)
Box Model and Sizing
Always set box-sizing: border-box globally via reset
rem for font sizes and breakpoints — respects user preferences
em for component-relative spacing (padding that scales with font size)
Fluid sizing with clamp() — replace manual breakpoint ladders
aspect-ratio over padding hacks for maintaining proportions
No units on zero values — margin: 0 not margin: 0px (except where required: flex: 0 0 0px)
Leading zero on decimals: opacity: 0.5 not opacity: .5
Shorthand hex where possible: #ebc not #eebbcc
SCSS / Dart Sass
Module System
@use and @forward only — @import is deprecated (Dart Sass 1.80.0), removed in 3.0.0
@use must appear before any rules except @forward
Namespace defaults to the last component of the URL (without extension)
Members are scoped to the loading file — not globally available
Each module loaded exactly once — no duplicate CSS output
Namespace access: variables.$primary not global $primary
No-namespace @use 'variables' as * — use sparingly, only for own files
math.div() for division — the / operator is deprecated
Prefix private members with - or _
Prefer mixins over @extend — more predictable output; @extend produces unexpected selectors and doesn't work
across media queries
Max nesting: 3 levels
@forward re-exports modules, supports prefixing and visibility control. Module configuration uses !default variables
and @use ... with (). See ${CLAUDE_SKILL_DIR}/references/scss.md for @forward patterns, configuration passthrough,
built-in module usage, and file organization conventions.
Migration
Use the official migrator: sass-migrator module --migrate-deps entrypoint.scss. For built-in functions only:
sass-migrator module --built-in-only entrypoint.scss.
CSS Methodologies
BEM (Block Element Modifier)
Blocks are standalone components: .card, .nav, .form
Elements are parts of a block (double underscore): .card__title, .card__image
Modifiers are variations (double hyphen): .card--featured, .card__title--bold
Never nest elements: .card__header__title is wrong — flatten to .card__title or create a new block
Modifiers don't exist alone — always pair with base class: class="card card--featured"
Use BEM in team projects, large codebases, projects without scoped styles
Skip BEM when using CSS Modules, utility-first CSS, or small projects
CSS Modules
Use simple, descriptive class names — scoping eliminates conflict risk
One module per component
Compose shared styles: composes: resetButton from './shared.module.css'
Global escape hatch: :global(.utility-class) when needed
Pair with custom properties for theming (variables aren't scoped)
Architecture (ITCSS)
Organize styles by specificity, low to high: Settings → Tools → Generic → Elements → Objects → Components → Utilities.
Maps naturally to cascade layers: @layer settings, generic, elements, objects, components, utilities;
Formatting
2-space indentation, no tabs
One declaration per line
Semicolon after every declaration including the last
Single quotes for attribute selectors and font names
Group declarations by category: layout → box model → typography → visual → interaction
Application
When writing CSS:
Apply all conventions silently — don't narrate each rule being followed.
Use intrinsic sizing and fluid techniques before media queries.
If an existing codebase contradicts a convention, follow the codebase and flag the divergence once.
When reviewing CSS:
Cite the specific violation and show the fix inline.
Don't lecture or quote the rule — state what's wrong and how to fix it.
Bad review comment:
"According to CSS best practices, you should avoid using ID selectors
for styling because they have high specificity."
Good review comment:
"`#header` -> `.header` -- IDs create specificity 1-0-0, difficult to override."
Integration
The coding skill governs workflow; this skill governs CSS implementation choices. For SCSS, this single skill covers
both CSS and SCSS conventions.
Predictability is the highest CSS virtue. When in doubt, keep specificity low and cascade explicit.
