/ engineering

Organize your LESS code

Writing CSS for big projects, with hundreds of lines of code, can be a hard job. Maintainance can be even harder and time wasting. In the last few years, CSS compilers like LESS, SASS and Stylus, have made designers’ lives easier. If you want to engage with CSS production and you don’t have experience with these tools, you should check them down, now!

Assuming you already have basic LESS knowledge, this article will try to guide you on how to easily write LESS code that is well organized, readable and maintainable.

Code sections
Our first step is to organize our code in files in the following order:

  • Declarations
  • Global rules
  • Specific rules
  • Responsive rules

Let's explain each section.
1. Declarations: Within this file we declare our functions and colors. It's a good practive to declare some basic colors for your project, including those that will be used for text, backgrounds, and some basic colors (like green, red, blue etc.) that you will use in your website.

A basic LESS file of this category

/*****************
	FUNCTIONS
******************/

/* This function outputs a cross-browser opacity CSS rule, given a parameter between 0 and 1 */
.opacity (@p) {
	-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{p})";
	filter: ~"alpha(opacity=@{p})";
	-moz-opacity: @p*0.01;
	-khtml-opacity: @p*0.01;
	opacity: @p*0.01;
}

/* Border radius declared to work with both pixels and percentages */
.radius ( @r ) when( ispercentage( @r ) ) {
	border-radius: @r;
}
.radius ( @r ) when( ispercentage( @r ) = false ){
	border-radius: unit(@r , px);
}

/* Reusable transition effect */
.transition( @time ) {
	-webkit-transition: ~'all @{time}s ease-out'; 
	   -moz-transition: ~'all @{time}s ease-out'; 
		 -o-transition: ~'all @{time}s ease-out'; 
			transition: ~'all @{time}s ease-out'; 
}

.nospace {
	margin: 0;
	padding: 0;
}

/**************
	COLORS
***************/
@blue: #346AA0;
@green: #489B53;
@red: #C33D37;
@orange: #FFAF45;
@lime: #B5CD24;

@text: #333;
@text-light: #888;
@background: #fff;
@background-darker: #e0e0e0;

We will explain the use of these declarations below.

2. Global rules: This should be the basic and biggest section of your code. Include rules that will be reused between multiple elements and pages. Reseting rules for HTML tags, body, header tags, styles about website's header and menus, are all placed here. You should also place rules for HTML classes, because classes are mainly reusable. Don't use classes in your HTML if you don't want to assign to it some reusable styles or Javascript functions.

An example file of this category:

a {
	text-decoration: none;
	color: @orange;
}
img {
	border: 0;
}
body {
	.nospace;
	
	font-size: 16px;
    font-family: Arial, sans-serif;
	color: @text;
	background-color: @background;
}

Did you notice our first use of declarations? Body tag section has some color variables within.

Let's see another example of what this file can contain:

@image-width: 40%;

.article-image {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	min-width: @image-width;
	
	.opacity( 0.8 );
	.transition( 0.4 );
    
    &:hover { .opacity( 1 ) }
}
.article-title {
	display: block;
	margin: 0 0 0.5em 0;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.2em;
	.transition( 0.4 );
	
	color: @text;
	text-shadow: 0 0 0 #fff;
	
	&:hover {
		color: @orange;
		text-shadow: 0 1px 5px rgba(0,0,0,0.3);
	}
}

We included some rules about reusable elements above. You can now see some more use cases of colors and functions.

3. Specific rules: Within here you should place CSS rules that aren't reusable. For example if you have a special button with a unique design, its LESS rules should be placed here. Rules reffering to tags with IDs should also be placed here, as long as IDs are not reusable either.

An example file:

#logo {
	width: 240px;
	height: 63px;
}
#social-links {
	> a {
		color: @red;
		font-size: 1em;
		font-weight: 600;
		display: block;
		clear: left;
		line-height: 3em;
		
		&:hover { color: @blue; }
	}
}

4. Responsive rules: Creating a responsive design requires some overwrites in cases of smaller screen sizes. It's strongly recommended to include these in a separate file.

An example file with responsive rules:

@media screen and (max-width:640px){
	body { font-size: 13px; }
}

@media screen and (max-width:400px){
	body { font-size: 11px; }
	
	#logo-link {
		width: 169px;
		height: 44px;
	}
}

How to compile and use
Keeping your website quick, requires using as less files (and requests)as possible,so you must combine all the above files into one minified CSS file, that will be included in your page. To achieve this, create a main.less file and use the import rule to include the files want, like this:

@import "definitions.less";
@import "global.less";
@import "specific.less";
@import "responsive.less";

Be carefull! The responsive styles have to be the last ones.

Now you are able to create your final CSS file by using the lessc command like this:

lessc -x main.less main.css

Don't forget to include the final, compiled CSS file to your code. LESS files are used only for production and have to be readable. CSS files should remain concaterated and minified.

<link rel="stylesheet" type="text/css" href="styles/main.css" />