less-best-practices

What this skill does

# Less CSS Best Practices

You are an expert in Less (Leaner Style Sheets), CSS architecture, and maintainable stylesheet development.

## Key Principles

- Write modular, reusable Less that leverages variables, mixins, and functions
- Follow consistent naming conventions and file organization
- Keep specificity low and avoid overly complex selectors
- Prioritize readability and maintainability

## File Organization

### Project Structure
```
less/
├── abstracts/
│   ├── variables.less      # Global variables
│   ├── mixins.less         # Reusable mixins
│   └── functions.less      # Less functions
├── base/
│   ├── reset.less          # CSS reset/normalize
│   ├── typography.less     # Typography rules
│   └── base.less           # Base element styles
├── components/
│   ├── buttons.less        # Button components
│   ├── cards.less          # Card components
│   └── forms.less          # Form components
├── layout/
│   ├── header.less         # Header layout
│   ├── footer.less         # Footer layout
│   ├── grid.less           # Grid system
│   └── navigation.less     # Navigation layout
├── pages/
│   ├── home.less           # Home page specific
│   └── contact.less        # Contact page specific
├── themes/
│   └── default.less        # Default theme
├── vendors/
│   └── normalize.less      # Third-party styles
└── main.less               # Main manifest file
```

### Main Manifest
```less
// main.less

// Abstracts
@import "abstracts/variables";
@import "abstracts/mixins";
@import "abstracts/functions";

// Vendors
@import "vendors/normalize";

// Base
@import "base/reset";
@import "base/typography";
@import "base/base";

// Layout
@import "layout/grid";
@import "layout/header";
@import "layout/navigation";
@import "layout/footer";

// Components
@import "components/buttons";
@import "components/cards";
@import "components/forms";

// Pages
@import "pages/home";

// Themes
@import "themes/default";
```

## Variables

### Naming Convention
```less
// variables.less

// Colors - use semantic names
@color-primary: #3498db;
@color-primary-light: lighten(@color-primary, 15%);
@color-primary-dark: darken(@color-primary, 15%);
@color-secondary: #2ecc71;
@color-text: #333333;
@color-text-muted: #666666;
@color-background: #ffffff;
@color-border: #e0e0e0;
@color-error: #e74c3c;
@color-success: #27ae60;
@color-warning: #f39c12;
@color-info: #17a2b8;

// Typography
@font-family-base: 'Helvetica Neue', Arial, sans-serif;
@font-family-heading: 'Georgia', serif;
@font-family-mono: 'Consolas', monospace;
@font-size-base: 1rem;
@font-size-small: 0.875rem;
@font-size-large: 1.25rem;
@font-size-h1: 2.5rem;
@font-size-h2: 2rem;
@font-size-h3: 1.75rem;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-bold: 700;
@line-height-base: 1.5;
@line-height-heading: 1.2;

// Spacing Scale
@spacing-unit: 8px;
@spacing-xs: (@spacing-unit * 0.5);   // 4px
@spacing-sm: @spacing-unit;            // 8px
@spacing-md: (@spacing-unit * 2);      // 16px
@spacing-lg: (@spacing-unit * 3);      // 24px
@spacing-xl: (@spacing-unit * 4);      // 32px
@spacing-xxl: (@spacing-unit * 6);     // 48px

// Breakpoints
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;
@breakpoint-xxl: 1400px;

// Z-index Scale
@z-index-dropdown: 1000;
@z-index-sticky: 1020;
@z-index-fixed: 1030;
@z-index-modal-backdrop: 1040;
@z-index-modal: 1050;
@z-index-popover: 1060;
@z-index-tooltip: 1070;

// Transitions
@transition-base: 0.3s ease;
@transition-fast: 0.15s ease;
@transition-slow: 0.5s ease;

// Border Radius
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-pill: 50px;
@border-radius-circle: 50%;

// Shadows
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
@shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

// Container widths
@container-sm: 540px;
@container-md: 720px;
@container-lg: 960px;
@container-xl: 1140px;
```

### Variable Interpolation
```less
// Use interpolation for dynamic property names
@property: margin;
@position: top;

.element {
  @{property}-@{position}: @spacing-md;
}

// Output: margin-top: 16px;
```

## Mixins

### Basic Mixins
```less
// mixins.less

// Clearfix
.clearfix() {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// Flexbox utilities
.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between() {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column() {
  display: flex;
  flex-direction: column;
}

// Usage
.container {
  .flex-center();
  min-height: 100vh;
}
```

### Parametric Mixins
```less
// Mixins with parameters
.button-variant(@bg-color, @text-color: white) {
  background-color: @bg-color;
  color: @text-color;
  border: none;

  &:hover {
    background-color: darken(@bg-color, 10%);
  }

  &:active {
    background-color: darken(@bg-color, 15%);
  }

  &:disabled {
    background-color: lighten(@bg-color, 20%);
    cursor: not-allowed;
  }
}

// Usage
.btn-primary {
  .button-variant(@color-primary);
}

.btn-secondary {
  .button-variant(@color-secondary);
}

.btn-danger {
  .button-variant(@color-error);
}
```

### Responsive Mixins
```less
// Media query mixins
.respond-to(@breakpoint, @rules) {
  @media (min-width: @breakpoint) {
    @rules();
  }
}

.respond-below(@breakpoint, @rules) {
  @media (max-width: (@breakpoint - 1px)) {
    @rules();
  }
}

.respond-between(@min, @max, @rules) {
  @media (min-width: @min) and (max-width: (@max - 1px)) {
    @rules();
  }
}

// Usage
.element {
  width: 100%;

  .respond-to(@breakpoint-md, {
    width: 50%;
  });

  .respond-to(@breakpoint-lg, {
    width: 33.333%;
  });
}
```

### Typography Mixins
```less
.font-size(@size, @line-height: @line-height-base) {
  font-size: @size;
  line-height: @line-height;
}

.truncate(@lines: 1) when (@lines = 1) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate(@lines) when (@lines > 1) {
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// Heading styles
.heading(@size) {
  font-family: @font-family-heading;
  font-size: @size;
  font-weight: @font-weight-bold;
  line-height: @line-height-heading;
  margin-bottom: @spacing-md;
}

// Usage
h1 {
  .heading(@font-size-h1);
}

.card-title {
  .truncate(2);
}
```

### Accessibility Mixins
```less
.visually-hidden() {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-visible() {
  &:focus-visible {
    outline: 2px solid @color-primary;
    outline-offset: 2px;
  }
}

// Usage
.sr-only {
  .visually-hidden();
}

.interactive-element {
  .focus-visible();
}
```

## BEM Naming Convention

```less
// Block Element Modifier pattern
.card {
  // Block styles
  background: @color-background;
  border-radius: @border-radius-md;
  box-shadow: @shadow-md;
  overflow: hidden;

  // Element: child of block
  &__header {
    padding: @spacing-md;
    border-bottom: 1px solid @color-border;
  }

  &__title {
    margin: 0;
    font-size: @font-size-large;
    font-weight: @font-weight-bold;
  }

  &__image {
    width: 100%;
    height: auto;
    display: block;
  }

  &__body {
    padding: @spacing-md;
  }

  &__footer {
    padding: @spacing-md;
    border-top: 1px solid @color-border;
    background: lighten(@color-border, 5%);
  }

  // Modifier: variant of block
  &--featured {
    border: 2px solid @color-primary;
  }

  &--horizontal {
    display: flex;

    .card__image {
      width: 200px;
      flex-shrink: 0;
    }
  }

  &--compact {
    .card__header,
    .card__body,
    .card__footer {
      padding: @spacing-sm;
    }
  }
}
```

## Nesting Rules

### Keep Nesting Shallow
```less
// BAD: Too deep nesting
.nav {
  .nav-list {
    .nav-item {