```
**When to use classes:**
- Component variants (`.button-primary`, `.button-secondary`)
- JavaScript hooks (`.js-toggle`)
- Utility overrides (`.visually-hidden`)
## Page-Specific Styles
Add `styles.css` to a content directory for page-specific styling:
```
content/portfolio/
├── index.md
└── styles.css
```
**styles.css:**
```css
/* Scoped to this page only */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
```
FolderWeb automatically loads and includes page-specific styles with cache-busting:
```html
```
## Page-Specific Scripts
For small progressive enhancements, you can add a `script.js` file to a content directory:
```
content/portfolio/
├── index.md
├── styles.css
└── script.js
```
**script.js:**
```js
// Small enhancement for this page only
document.querySelector('.portfolio-grid')?.addEventListener('click', (e) => {
// ...
});
```
FolderWeb automatically loads the script with `defer` (non-blocking) and cache-busting:
```html
```
The script tag is placed before `
`, so it runs after the page has been parsed. This is ideal for progressive enhancement — the page works without JavaScript, but gets enhanced when it's available.
## Dark Mode
Add dark mode with CSS variables and `prefers-color-scheme`:
```css
:root {
--color-bg: oklch(98% 0 0);
--color-text: oklch(20% 0 0);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: oklch(15% 0 0);
--color-text: oklch(95% 0 0);
}
}
```
All colors using the variables automatically adapt.
## Responsive Design
Use fluid layouts and relative units:
```css
/* Bad: fixed breakpoints */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Good: fluid and flexible */
.container {
width: min(90%, 1200px);
padding: clamp(1rem, 3vw, 3rem);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: clamp(1rem, 3vw, 2rem);
}
```
**Use media queries sparingly:**
- Layout changes (sidebar position)
- Font size adjustments
- Complex interactions
**Prefer fluid CSS:**
- Spacing (`clamp()`)
- Typography (`clamp()`)
- Grids (`auto-fit`, `minmax()`)
## Cache Busting
FolderWeb automatically versions CSS files with MD5 hashes:
```html