What is LESS css?

What is LESS?

LESS is a css pre-compilier that has gained popularity over the past few years. There are a few good introductions to the language you can find here:

So I thought I would share what I like about LESS the most.

Syntax– I like how LESS introduces features such as variables and mixins without the overhead of learning new syntax. In addition, the use of nested rules feels like a native feature to regular css.

Variables – As mentioned previously, variables is a new introduction to css. I find variables mainly assigned to colors and they allow developers to define colors in one place so they can be changed easily without using search and replace.

Nested rules– Nested Rules are by far the greatest feature to regular css. They make css more DRY and easier to read as their inheritance is cleary visable. Nested selectors also force the developer to group togather related css within the file.

Functions – I havn’t used functions too much, but where I have, they really do help reducing duplicate code.

Operations, Namspaces, JavaScript – To be honest, I havn’t really used these 3 features of LESS very often (or at all). As I continue my use of LESS, I will update this post on how I feel about these features.

In conclusion, LESS is a WIN for me. It helps organize CSS in a “natural” way. It also helps keep LESS DRY. So there you go, LESS, it’s a good thing.

BAD CSS

These Things Annoy Me

(And probably annoy you too)

In this post I’m just listing out some CSS gripes I’ve seen and their annoyance based on my scale here:


Slightly Annoyed

Annoyed

Really Pissed

<%= image_tag "articles/badcss/level.png" %>

Example 1

Please Don’t Do This:

		<div style="color:red;">
			You have not entered a name.
		</div>
		
		<div style="color:gray;font-size:12px">
			Name: <input type="text" size="20" name="name"/>
		</div>
		
		<div style="color:gray;font-size:12px">
			Address: <input type="text" size="20" name="addr"/>
		</div>
	

because that makes me have to do this:

		<div class="error">
			You have not entered a name.
		</div>
		
		<div class="labelInput">
			Name: <input type="text" size="20" name="name"/>
		</div>
		
		<div class="labelInput">
			Address: <input type="text" size="20" name="addr"/>
		</div>
	

and

	.error {
		color:red;
	}
	
	.labelInput {
		color:gray;
		font-size:12px
	}
	

Example 2

Please Don’t Describe What the CSS is Doing

		.highlight-red {
			color:red;
			font-weight:bold
		}
		
		.left-align-input {
			margin-left:30px;
			font-color:gray;
			font-size:20px;
		}
	

Example 3

Please Don’t Add Default Styles to Elements

		.error {
			color:red;
			font-weight:bold
		}
		
		table {
			margin-left:30px;
			font-color:yellow;
			font-size:6px;
		}
		
		p {
			margin-right:20px;
			font-color:red;
			font-size:6px;
		}
		
		articleContent {
			text-align:center;
		}
		.
		.
		.
	

because that makes me do:

		.error {
			color:red;
			font-weight:bold
		}
		/*
		table {
			margin-left:30px;
			font-color:yellow;
			font-size:6px;
		}
		
		p {
			margin-right:20px;
			font-color:red;
			font-size:6px;
		}
		*/
		articleContent {
			text-align:center;
		}
		.
		.
		.
	

or add my own css to P and Table elements I do not want your crappy style applied to.


Example 4

Stay back! I don’t want to catch your divities.

		<div id="out-wrapper-div">
			<div id="inner-wrapper-div">
				<div class="inner-wrapper-input">
					<span class="input-span-wrapper"><input type="text" name="name"/></span>
				</div>
			</div>
		</div>
		<div id="out-wrapper-div">
			<div id="inner-wrapper-div">
				<div class="inner-wrapper-input">
					<span class="input-span-wrapper"><input type="text" name="addr"/></span>
				</div>
			</div>
		</div>
	

Example 5

Important! Don’t abuse !important

There has been much discussion on when is the right time to use !important, so and there are valid reasons to use it. Do not abuse such power.

		p {
			margin-right:20px !important;
			font-color:red !important;
			font-size:6px !important;
			padding-left:0px !important;
			margin:0px !important;
		}
	

ugh.


Example 6

You can actually add arbitrary text to HTML using CSS. No matter how experienced you are, there will be times where you forget this and spend needless time digging around trying to figure out how this magical text appears only to find out it was produced by CSS.

Doing this like:

		#copyright:after { content: "Copyright 2011 John Smith"; }
		.
		.
		#homeLink:after { content: "Home";}
	

makes it really hard to find out which JSP / GSP / RHTML / ETC ‘view’ is rendering it which means I now have to go digging around your javascript and CSS files for content that has been added by CSS.


Example 7

Group related styles

		table {
			text-align:center;
			font-color:gray;
		}
		
		.error {
			font-color:red;
		}
		
		.article-content-header{
			font-size:12px;
		}
		tr {
			margin-left:10px;
		}
		#navbar {
		.
		.
		.
		th {
			font-weight:bold;
		}
		.hello {
			padding:2px;
			margin:10px;
		}
		
		td {
		}