LESS Do's and Don'ts

This lesson presents the best practices from the previous lesson as a fast, scannable list of concrete do's and don'ts, side by side, for quick reference while actively writing LESS.

How to Use This List

Each row below pairs a recommended pattern with the mistake it replaces. Use this as a fast lookup while coding, and refer back to the relevant earlier lesson whenever you need a deeper explanation of the reasoning.

// DON'T
.center { display: flex; } // also outputs as standalone CSS

// DO
.center() { display: flex; } // reusable only

This single parentheses difference is one of the most common early LESS mistakes.

How Each Entry Is Structured

DON'T: <a common mistake>
DO:    <the corrected pattern>

Each entry pairs a mistake with its direct correction for fast scanning.
Entries are grouped by topic: mixins, nesting, variables, guards, and imports.
This list assumes familiarity with the deeper explanations covered in earlier lessons.

LESS Do's and Don'ts Cheatsheet

Concrete, paired examples of common mistakes and their corrections.

Don't	Do	Why
`.mixin { }` (no parens)	`.mixin() { }`	Avoids unwanted standalone CSS output
Nest 5+ levels deep	Nest 3 levels or fewer	Avoids overly specific compiled selectors
Hardcode `#2563eb` repeatedly	Reference `@color-primary`	Keeps values consistent and easy to update
Write `<=` in a guard	Write `=<`	LESS has no `<=` operator
Skip a `default()` fallback	Always add one to guarded families	Prevents silently unstyled edge cases
`@import` a huge library plainly	`@import (reference) "lib";`	Avoids unused CSS bloat
Duplicate styles via repeated mixin calls	Use `:extend()` for shared static styles	Avoids declaration duplication
Assume `@variable` updates at runtime	Bridge to a custom property for runtime needs	LESS variables are compile-time only

Mixins: Do's and Don'ts

Mixin-related mistakes are some of the most common for developers newer to LESS, mostly around the parentheses convention and comma versus semicolon argument separators.

DON'T forget parentheses when defining a reusable mixin.
DO use semicolons to separate arguments when any argument contains a comma-separated value.
DON'T write one giant mixin that tries to handle every possible case.
DO compose several small, focused mixins instead.

Guards: Do's and Don'ts

Guard-related mistakes usually come from unfamiliarity with LESS's specific comparison operators and the lack of a traditional else statement.

DON'T write <=, LESS has no such operator.
DO write =< for less-than-or-equal.
DON'T assume the first matching guard 'wins' and stops evaluation; multiple guards can match simultaneously.
DO add a default() fallback for any argument value you haven't explicitly guarded for.

Architecture: Do's and Don'ts

Architecture-related mistakes tend to surface only as a project grows, making them easy to overlook early on.

DON'T let variables and mixins live scattered across component files.
DO centralize them in a dedicated abstracts folder, imported first.
DON'T compile every partial file individually.
DO compile only a single main entry file that imports everything else.

Common Mistakes

Using this quick-reference list as a substitute for understanding the reasoning covered in earlier, more detailed lessons.
Applying a 'do' inconsistently in some files but not others, undermining the benefit of a shared convention.
Skipping the guard-specific entries and reintroducing the <= typo repeatedly across a codebase.
Not revisiting this list periodically as new team members join a LESS project.

Key Takeaways

This list pairs common LESS mistakes directly with their corrected pattern for fast reference.
Mixin parentheses, guard operators, and reference imports are the most frequent sources of early mistakes.
Architecture-related do's and don'ts matter more as a project grows in size.
Use this list as a quick lookup, and the earlier dedicated lessons for deeper understanding.

Pro Tip

Pin this do's and don'ts list somewhere your team can reference quickly during code review, catching a missing default() fallback or an unparenthesized mixin here is far cheaper than catching it in production.