css-workflow

The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.

CSS Workflow

Tool Grid

| Task | Tool | Command | |------|------|---------| | Lint | Stylelint | npx stylelint "**/*.css" | | Format | Prettier | npx prettier --write "**/*.css" | | Dead code | PurgeCSS | npx purgecss --css *.css --content *.html |

Tailwind CSS

RECOMMENDED over custom CSS for consistency and maintainability.

• SHOULD use utility classes for most styling needs
• MUST configure tailwind.config.js for project design tokens
• SHOULD use @apply sparingly - prefer utilities in markup
• MUST NOT use arbitrary values ([123px]) when design token exists
• SHOULD extend theme rather than override

Class order: Layout > Sizing > Spacing > Typography > Colors > Effects > Interactivity

Native CSS Features

SHOULD prefer native CSS over Sass/preprocessors.

/* CSS Variables */
:root { --color-primary: #3b82f6; }
.component { color: var(--color-primary, #3b82f6); }

/* Native Nesting */
.card {
  & .title { font-weight: bold; }
  &:hover { box-shadow: 0 4px 6px rgb(0 0 0 / 0.1); }
}

/* Container Queries */
.card-container { container-type: inline-size; }
@container (min-width: 400px) { .card { display: grid; } }

Naming Conventions

SHOULD use BEM for custom CSS:

.card { }           /* Block */
.card__title { }    /* Element */
.card--featured { } /* Modifier */

• MUST use lowercase kebab-case
• SHOULD use semantic names (btn-primary not btn-blue)
• MUST prefix utilities with u-, JS hooks with js-

Organization

Property order: Positioning > Display/Box Model > Typography > Visual > Misc

Mobile-first: MUST use min-width media queries.

.component {
  padding: 1rem;
  @media (min-width: 768px) { padding: 2rem; }
}

Modern Features

/* Grid - 2D layouts */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

/* Flexbox - 1D layouts */
.flex { display: flex; align-items: center; gap: 1rem; }

/* Logical properties - i18n support */
.component { margin-inline: auto; padding-block: 1rem; }

Dark Mode

MUST support via prefers-color-scheme:

:root { --color-bg: #fff; --color-text: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  :root { --color-bg: #1a1a1a; --color-text: #fff; }
}

Optional class toggle: [data-theme="dark"] { --color-bg: #1a1a1a; }

Performance

• SHOULD inline critical above-the-fold CSS
• MUST NOT use @import in production (blocks parallel downloads)
• MUST remove unused CSS (PurgeCSS, Tailwind purge)
• SHOULD limit selector specificity (max 3 levels)
• MUST NOT use !important except for utilities

Accessibility

Focus States (REQUIRED)

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

Reduced Motion (REQUIRED)

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Color & Visibility

• MUST meet WCAG 2.1 AA contrast (4.5:1 text, 3:1 large text)
• SHOULD NOT rely on color alone to convey information

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}