CSS Cheat Sheet

CSS cheat sheet with real commands and snippets for setup, core workflows, debugging, and production-safe automation patterns. If you are working across tools, pair this with the HTML Cheat Sheet and Tailwind CSS Cheat Sheet.

Setup and Validation

Goal: Run formatters and linters for content files

# Format project files when formatter is available
npx prettier -w . || true

# Lint Markdown/YAML/JSON if linters exist
npx markdownlint-cli2 '**/*.md' || npx yaml-language-server --help || true

# Search for TODO placeholders before publish
rg "TODO|TBD" .

Core Patterns

Goal: Use a production-safe snippet

/* Layout primitives and theme tokens */
:root {
  --bg: #ffffff;
  --fg: #0f172a;
  --accent: #2563eb;
}

.card {
  background: var(--bg);
  color: var(--fg);
  border-radius: 12px;
  padding: 1rem;
}

Automation and CI

Goal: Add validation step to CI pipeline

# Run strict shell mode in CI
set -euo pipefail

# Validate syntax and formatting in one pass
npx prettier -c .

# Fail build if broken references exist
rg "](/[^)]+)" src/content -n

Debugging and Troubleshooting

Goal: Track parse failures quickly

# Use ripgrep to isolate malformed syntax
rg "{{|}}|<[^>]*$" src -n

# Print files with potential encoding issues
file -I src/content/sheets/*.md

# Re-run formatter with explicit parser
npx prettier --parser markdown src/content/sheets/*.md || true

Common Gotchas

• Keep CSS content valid and machine-readable for build pipelines.
• Avoid trailing commas or comments in strict JSON files.
• Use consistent heading depth to keep TOC generation stable.
• Prefer explicit encoding (UTF-8) for portability.
• Run formatter checks before committing content edits.

Related Sheets

• HTML Cheat Sheet — daily HTML commands and production-ready examples.
• Tailwind CSS Cheat Sheet — daily Tailwind CSS commands and production-ready examples.
• C# Cheat Sheet — daily C# commands and production-ready examples.