CSS/LESS Best Practices at Campus Management Corp.

At Campus Management Corp. we use the LessCss in many of our products and core frameworks. Less is a common Node.js based CSS pre-processor that extends CSS3 to add variables, mixins, and functions to make our applications more maintainable. During builds, Less files are “compiled” into CSS3 file which are then distributed with the software. This document provides an overview of the best practices we employee for Less (and to a great extent) CSS files.

First up, the big no nos

Avoid inline styles

They violate the separation of content and style,  bread inconsistency, increase maintenance costs, lower accessibility, and increase HTML document size. In addition, since they are not pre-processed, Less variables cannot be used.

Avoid !important

While using it isn’t wrong 100% of the time, it is generally not advisable. Like inline styles, it breads inconsistent results, which makes debugging styling issues more difficult.

Avoid ID selectors

They are not reusable, are too specific, and almost exclusively useless for matters of CSS. By all means, use them in JavaScript, but they should be avoided in CSS.

Avoid overly general selectors

Styling a <div /> or <p /> is generally unnecessary. The base styles that would target these elements are handled in the reset or, for specific cases in the base styles.

Avoid magic and/or hardcoded values

Magic values, like colors or numbers should almost exclusively be Less variables. If you find yourself needing an arbitrary value there is a good chance your approach is wrong. If you prove your approach correct, and a new value is necessary, place it in the custom-bootstrap-variable.less file.

Less/Style Guidelines

We follow the @mdo style guide with a few adjustments:

Use the single quotation style for all strings and attribute selectors

Non-whole decimal points should include a leading zero

CSS and Less should be nested no more than three levels deep

See this for some interesting nesting approaches in Less.

Use complete lower case hex codes for colors

Avoid overly specific selectors

Name selectors in train case with hyphen delimiters

Use single lines for properties and selectors

Spacing Matters

Linting CSS and Less via LessHint

We use LessHint to lint our code. The above standards are consistent with its defaults with minor exceptions. Specifically we don’t require that properties be written in alphabetical order and we don’t require that numeric values always be accompanied by a unit.

Customizing Bootstrap with Less

It is tempting when using Bootstrap to start mucking around with variables in variables.less. Doing so, however, makes it very difficult to upgrade Bootstrap. Therefore, you should avoid modifying any file in the Bootstrap directory. Instead, you should use the following pattern to customize Bootstrap to your needs.

  1. Install Bootstrap with bower (or node.js) by executing bower install bootstrap
  2. Create a file named custom-bootstrap-variables.less outside of the bootstrap distribution (generally a folder named less)
  3. Create a file named custom-bootstrap.less outside of the bootstrap directory (generally a folder named less)
  4. Add the following content to custom-bootstrap.less:
  5. Override variables in custom-bootstrap-variables.less.
  6. When you compile less files, do so from custom-bootstrap.less instead of bootstrap.less (lessc custom-bootstrap.less dist/css/bootstrap.css)

 

Our best practices are heavy influenced by 18F, @mdo, the writings of Jonathan Verrecchia, Harry Roberts, Nicole Sullivan, and Josh Broton and enforced by LessHint

 

Leave a Reply

Skip to toolbar