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; }