# Css

> Best practices for CSS development including modern layout techniques, naming conventions, theming, and maintainable stylesheet architecture

- **Type:** Skill
- **Install:** `agentstack add skill-mindrally-skills-css`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Mindrally](https://agentstack.voostack.com/s/mindrally)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [Mindrally](https://github.com/Mindrally)
- **Source:** https://github.com/Mindrally/skills/tree/main/css

## Install

```sh
agentstack add skill-mindrally-skills-css
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# CSS Development Guidelines

## Core Principles

- Write semantic HTML to improve accessibility and SEO
- Use CSS for styling, avoiding inline styles
- Ensure responsive design using media queries and flexible layouts
- Prioritize external stylesheets over inline or embedded styles

## Layout Techniques

### Flexbox
- Use Flexbox for one-dimensional layouts (rows or columns)
- Leverage `justify-content` and `align-items` for alignment
- Use `flex-wrap` for responsive wrapping behavior
- Prefer `gap` property over margins for consistent spacing

### Grid
- Use CSS Grid for two-dimensional layouts
- Define grid templates with `grid-template-columns` and `grid-template-rows`
- Use `grid-area` for named template areas
- Leverage `auto-fit` and `auto-fill` for responsive grids

## Units and Typography

- Use `rem` units for typography to respect user preferences
- Use `em` units for component-relative sizing
- Avoid `px` for font sizes; reserve for borders and fixed elements
- Implement fluid typography with `clamp()` when appropriate
- Use viewport units (`vw`, `vh`) thoughtfully for full-screen layouts

## CSS Variables (Custom Properties)

- Define design tokens as CSS variables on `:root`
- Use variables for colors, spacing, typography, and shadows
- Implement theming by overriding variables in different contexts
- Name variables semantically (e.g., `--color-primary`, `--spacing-md`)

## Naming Conventions

### BEM Methodology
- Block: Standalone component (e.g., `.card`)
- Element: Part of a block (e.g., `.card__title`)
- Modifier: Variation of block or element (e.g., `.card--featured`)

### Best Practices
- Use lowercase with hyphens for class names
- Avoid IDs for styling; reserve for JavaScript hooks
- Keep specificity low by using single class selectors
- Scope styles to components to prevent conflicts

## Specificity Management

- Maintain specificity at 0-1-0 (single class) when possible
- Avoid `!important` declarations
- Use cascading intentionally, not accidentally
- Consider CSS Layers (`@layer`) for specificity control

## Responsive Design

- Implement mobile-first media queries
- Use relative units for flexible layouts
- Test across multiple viewport sizes
- Consider container queries for component-level responsiveness

## Performance

- Minimize selector complexity
- Avoid deeply nested selectors
- Use efficient selectors (class over element)
- Leverage CSS containment for isolated components
- Consider critical CSS for above-the-fold content

## Modern CSS Features

- Use `aspect-ratio` for maintaining proportions
- Leverage `gap` in Flexbox and Grid
- Use logical properties (`margin-inline`, `padding-block`)
- Implement smooth transitions with `transition` property
- Use `@supports` for feature detection

## Organization

- Structure stylesheets logically (base, layout, components, utilities)
- Keep files modular and focused
- Document complex styles with comments
- Use a consistent property order within declarations

## Browser Compatibility

- Use vendor prefixes when necessary (consider Autoprefixer)
- Test across target browsers
- Provide fallbacks for newer features
- Use progressive enhancement approach

## Accessibility

- Ensure sufficient color contrast (WCAG AA minimum)
- Provide visible focus styles for keyboard navigation
- Avoid hiding content in ways that affect screen readers
- Use `prefers-reduced-motion` media query for animations

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Mindrally](https://github.com/Mindrally)
- **Source:** [Mindrally/skills](https://github.com/Mindrally/skills)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mindrally-skills-css
- Seller: https://agentstack.voostack.com/s/mindrally
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.