/understand

CSS Language Prompt Snippet

Key Concepts

• Selectors: Element, class (.name), ID (#name), attribute ([attr]), and pseudo-class (:hover) targeting
• Specificity: Inline > ID > Class > Element cascade priority determining which rules win
• Box Model: margin, border, padding, content dimensions controlling element sizing
• Flexbox: display: flex with justify-content, align-items for one-dimensional layouts
• Grid: display: grid with grid-template-columns/rows for two-dimensional layouts
• Custom Properties (Variables): --name: value with var(--name) for reusable design tokens
• Media Queries: @media (max-width: ...) for responsive design breakpoints
• SCSS/Sass Features: Nesting, $variables, @mixin, @include, @extend, @use, @forward
• CSS Modules: Scoped class names (.module.css) preventing global style collisions
• Cascade Layers: @layer for explicit control over cascade ordering

Notable File Patterns

• *.css — Standard CSS stylesheets
• *.scss / *.sass — Sass/SCSS preprocessor files
• *.less — Less preprocessor files
• *.module.css / *.module.scss — CSS Modules (scoped styles)
• globals.css / reset.css / normalize.css — Global base styles
• tailwind.config.js — Tailwind CSS configuration (though a JS file)
• variables.scss / _variables.scss — Design token definitions

Edge Patterns

• CSS files are related to the HTML or component files that import them for styling
• SCSS partial files (_*.scss) are depends_on by the main stylesheet that @uses them
• CSS variable definition files are related to all stylesheets that reference those variables
• CSS Modules are related to the component files that import them

Summary Style

"Global stylesheet defining CSS custom properties for the design system color palette and typography." "Responsive layout styles with flexbox and grid for the dashboard page across 3 breakpoints." "SCSS partial defining shared mixins for spacing, shadows, and media query breakpoints."