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

// 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

// 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

// Use interpolation for dynamic property names

@property: margin;

@position: top;

.element {

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

}

// Output: margin-top: 16px;

Mixins

Basic Mixins

// 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

// 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

// 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

.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

.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

// 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

// BAD: Too deep nesting

.nav {

  .nav-list {

    .nav-item {

      .nav-link {

        .nav-icon {

          // 5 levels - creates high specificity

        }

      }

    }

  }

}

// GOOD: Flat BEM structure with shallow nesting

.nav {

  display: flex;

  align-items: center;

}

.nav__list {

  display: flex;

  list-style: none;

  margin: 0;

  padding: 0;

}

.nav__item {

  margin: 0 @spacing-sm;

}

.nav__link {

  color: @color-text;

  text-decoration: none;

  transition: color @transition-base;

  // Acceptable: state nesting

  &:hover,

  &:focus {

    color: @color-primary;

  }

  // Acceptable: modifier nesting

  &--active {

    color: @color-primary;

    font-weight: @font-weight-bold;

  }

}

Acceptable Nesting Patterns

.component {

  // Pseudo-elements

  &::before,

  &::after {

    content: '';

    position: absolute;

  }

  // State pseudo-classes

  &:hover,

  &:focus,

  &:active {

    // State styles

  }

  // BEM modifiers

  &--variant {

    // Modifier styles

  }

  // Media queries

  .respond-to(@breakpoint-md, {

    // Responsive styles

  });

}

Functions

Built-in Functions

// Color functions

.element {

  // Lighten/darken

  background: lighten(@color-primary, 20%);

  border-color: darken(@color-primary, 10%);

  // Saturation

  color: saturate(@color-primary, 20%);

  // Mix colors

  background: mix(@color-primary, @color-secondary, 50%);

  // Fade (opacity)

  background: fade(@color-primary, 50%);

  // Color extraction

  @hue: hue(@color-primary);

  @saturation: saturation(@color-primary);

  @lightness: lightness(@color-primary);

}

// Math functions

.element {

  width: percentage(1/3);        // 33.33333%

  height: round(10.5px);         // 11px

  margin: ceil(4.2px);           // 5px

  padding: floor(4.8px);         // 4px

  font-size: abs(-10px);         // 10px

  z-index: min(5, 10, 3);        // 3

  z-index: max(5, 10, 3);        // 10

}

// String functions

@selector: e(".my-class");      // Escape

@path: %("url(%s)", "image.png"); // Format

Custom Functions (Using Mixins)

// Less doesn't have true functions, use mixins with output

.spacing(@multiplier) {

  @result: (@spacing-unit * @multiplier);

}

// Usage with variable scope

.element {

  .spacing(3);

  padding: @result; // 24px

}

// Alternative: use variables directly

.padding(@multiplier) {

  padding: (@spacing-unit * @multiplier);

}

.margin(@multiplier) {

  margin: (@spacing-unit * @multiplier);

}

.element {

  .padding(2);

  .margin(1);

}

Loops

Generating Classes

// Generate column classes

.generate-columns(@n, @i: 1) when (@i =< @n) {

  .col-@{i} {

    width: percentage(@i / @n);

  }

  .generate-columns(@n, (@i + 1));

}

// Usage: generates .col-1 through .col-12

.generate-columns(12);

// Generate spacing utilities

.generate-spacing(@i: 0) when (@i =< 8) {

  .m-@{i} {

    margin: (@spacing-unit * @i);

  }

  .mt-@{i} {

    margin-top: (@spacing-unit * @i);

  }

  .mb-@{i} {

    margin-bottom: (@spacing-unit * @i);

  }

  .p-@{i} {

    padding: (@spacing-unit * @i);

  }

  .pt-@{i} {

    padding-top: (@spacing-unit * @i);

  }

  .pb-@{i} {

    padding-bottom: (@spacing-unit * @i);

  }

  .generate-spacing((@i + 1));

}

.generate-spacing();

Loop Over Lists

// Define color list

@color-names: primary, secondary, success, danger, warning, info;

@color-values: @color-primary, @color-secondary, @color-success, @color-error, @color-warning, @color-info;

// Generate color utilities

.generate-colors(@names, @values, @i: 1) when (@i =< length(@names)) {

  @name: extract(@names, @i);

  @value: extract(@values, @i);

  .text-@{name} {

    color: @value;

  }

  .bg-@{name} {

    background-color: @value;

  }

  .border-@{name} {

    border-color: @value;

  }

  .generate-colors(@names, @values, (@i + 1));

}

.generate-colors(@color-names, @color-values);

Guards (Conditionals)

// Mixin with guards

.button-size(@size) when (@size = small) {

  padding: @spacing-xs @spacing-sm;

  font-size: @font-size-small;

}

.button-size(@size) when (@size = medium) {

  padding: @spacing-sm @spacing-md;

  font-size: @font-size-base;

}

.button-size(@size) when (@size = large) {

  padding: @spacing-md @spacing-lg;

  font-size: @font-size-large;

}

// Usage

.btn-sm {

  .button-size(small);

}

.btn-md {

  .button-size(medium);

}

.btn-lg {

  .button-size(large);

}

// Guards with comparison operators

.set-color(@lightness) when (@lightness > 50%) {

  color: black;

}

.set-color(@lightness) when (@lightness =< 50%) {

  color: white;

}

Namespacing

// Group related mixins

#utils {

  .clearfix() {

    &::after {

      content: '';

      display: table;

      clear: both;

    }

  }

  .visually-hidden() {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

  }

}

#buttons {

  .base() {

    display: inline-flex;

    align-items: center;

    border: none;

    cursor: pointer;

    transition: all @transition-base;

  }

  .primary() {

    #buttons.base();

    background: @color-primary;

    color: white;

  }

}

// Usage

.container {

  #utils.clearfix();

}

.btn-primary {

  #buttons.primary();

}

Performance Best Practices

• Avoid deeply nested selectors (max 3 levels)

• Keep specificity low - prefer single class selectors

• Never use !important except for utility overrides

• Use mixins for vendor prefixes (or autoprefixer)

• Minimize use of extend as it can increase file size

• Compile to compressed CSS in production

• Enable source maps in development only

Code Style Guidelines

• Use 2 spaces for indentation

• Use single quotes for strings

• Add a space after colons in declarations

• Add a space before opening braces

• Put closing braces on new lines

• Separate rule sets with blank lines

• Comment complex logic

• Order properties consistently

Property Order

.element {

  // Positioning

  position: relative;

  top: 0;

  right: 0;

  z-index: @z-index-dropdown;

  // Display & Box Model

  display: flex;

  flex-direction: column;

  width: 100%;

  max-width: @container-md;

  padding: @spacing-md;

  margin: @spacing-sm auto;

  // Typography

  font-family: @font-family-base;

  font-size: @font-size-base;

  font-weight: @font-weight-normal;

  line-height: @line-height-base;

  color: @color-text;

  text-align: left;

  // Visual

  background-color: @color-background;

  border: 1px solid @color-border;

  border-radius: @border-radius-md;

  box-shadow: @shadow-sm;

  // Animation

  transition: all @transition-base;

  // Misc

  cursor: pointer;

  overflow: hidden;

}