38 lines
2.0 KiB
Markdown
38 lines
2.0 KiB
Markdown
# 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 `@use`s 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."
|