<p class="paragraph"></p>

This sounds like madness to me. I’ll quote their most plausible reason for this:

Browsers parse CSS rules from right to left. That means, that selector “.menu a” browsers apply that way: 1. Select all ‘a’ nodes of the page. 2. Filter that ‘a’ nodes and keep only those of them that has ‘.menu’ as ancestor.
If you have two or more rules ending with “a”, a browser would try to apply every rule to every link of the page. That could slow your page rendering speed, as it takes a lot of excess time.

A very smart German man made some very strong counter-arguments, and pointed out that to give every element a class is to miss the point of CSS. Furthermore, he linked to an article demonstrating that the named performance issues are so small that it’s not worth trying to optimise CSS selectors.

That’s enough about BEM. It’s a drop in the ocean of over-complicated CSS strategies. Some people are pre-processing CSS (which isn’t so bad, really), and some people are even trying to coin a term like “Object-Oriented CSS” (WTF?!). Writing CSS shouldn’t be complicated. The beauty is in the simplicity. Over the past year or so, I’ve experimented with different ways of organising my stylesheets in such a way as to minimise repetitive code. I’ve tried really large comment banners:

/*--------------------------------------------------
                        Header
	-------------------------------------------------- */

header {
	position: absolute;
	width: 920px;
	padding: 20px;
	background: #f0f0f0;
}

#logo {
	display: block;
	background: transparent url(logo.png) no-repeat 0 0;
}

/*--------------------------------------------------
                         Body
	-------------------------------------------------- */

#content {
	/* 

	Some more styles, ad infinitum.... 

	*/
}

…And this seems alright. At a quick glance, I can see which rules apply to which part of the document. That’s one way of keeping a document organised, but I’m not sure it’s quite enough. There’s still one fairly serious problem. The stylesheet is going to grow, and grow, and grow! You’ll be merrily coding away, pushing margin values around and building your interface, until suddenly your stylesheet is over a thousand lines long!

My solution

Since I have the luxury of working with a large display, I now place all my rules on one line. Is that crazy?! No. Check it out:

header {background: transparent url(../img/header-bg.png) repeat-x 0 0; height: 141px;}
header a.logo {display: block; background: transparent url(../img/logo.png) no-repeat 0 0; width: 222px; height: 51px; margin: 37px 0 0 38px;}
header .logo h1, header .logo h2  {text-indent: -9999px; line-height: 0; height: 0; width: 0; margin: 0; padding: 0;}

.searchbar {margin-top: 45px; background: url(../img/search-bg.png) no-repeat 0 0; width: 302px; height: 37px; margin-left: 392px;}
.searchbar *:focus {outline: none; box-shadow: none; -webkit-box-shadow: none;}
.searchbar input {color: #666; background: transparent; border: none; margin-top: 6px;}

.projects {width: 200px; height: 285px; position: absolute; right: 26px; top: 22px; overflow: hidden;}
.projects ul {list-style-type: none; overflow-x: hidden; overflow-y: scroll; max-height: 273px; width: 200px; margin: 0; background: transparent url(../img/project-bg.png) repeat 0 0;}
.projects li {width: 169px; height: 31px; background: transparent url(../img/projectsprite.png) no-repeat 0 0; display: block; margin: 3px auto 0; color: #9fa8b0; line-height: 31px; padding-left: 13px; font-size: 12px; text-shadow: 0px 1px 1px rgba(0,0,0,0.4); filter: dropshadow(color=#000000, offx=0, offy=1);}
.projects li:hover {background-position: 0 -31px; cursor: pointer; color: #eef2f5;}
.projects li.active:before {content: url(../img/goldarr.png);}
.projects span {display: block; width: 100%; height: 6px; background: transparent url(../img/project-rnd.png) no-repeat 0 0;}
.projects .btm {background-position: 0 -6px;}

.nav {height: 43px; background: #ccc; margin: 334px 0 12px;}
.nav li {display: block; float: left; height: 43px;}
.nav li a {display: block; height: 100%; text-align: center; line-height: 43px; text-indent: -9999px; background-image: url(../img/navsprite.jpg);}
.nav li a:hover {cursor: pointer;}
.nav .start {width: 106px;}
.nav .blogg {width: 116px;}
.nav .projekt {width: 137px;}
.nav .omoss {width: 131px;}
.nav .kunder {width: 134px;}
.nav .kontakt {width: 140px;}
.nav .nyheter {width: 176px;}

Note: This code won’t look good on this blog. A large display is needed.

Oh, it’s beautiful! It’s organised! I know which rules apply to which elements on the page, and I can see the entire stylesheet. It’s so simple; the first group of lines start with ‘header’, and so they correspond with the ‘header’ element on the page. The ‘.nav’ group of lines corresponds with the site’s navigation bar. You get the idea. I start each block with the most general rules, which are applied to the parent element. The lines that follow then become increasingly specific. This is basic CSS! It shouldn’t be more complicated than this. Let’s not stop. Let’s add some constants.

Defining constants

When I say “defining constants”, I mean adding some CSS rules that you know aren’t going to ever change. Most commonly, this means things like a CSS Reset, or some Font-Squirrel styles. When I define constant CSS rules, I like to stick them at the top of my stylesheet, and minify them. That way I know where they are, but they’re also out of my way so I can focus on the things that do need changing. Let’s combine our chunky comment banners with minified constants:

/*--------------------------------------------------
              Avenir font | Font Squirrel
	-------------------------------------------------- */
@font-face{font-family:AvenirLTStd85Heavy;src:url(../fonts/avenirltstd-heavy-webfont.eot);src:url(../fonts/avenirltstd-heavy-webfont.eot?#iefix) format(embedded-opentype), url(../fonts/avenirltstd-heavy-webfont.woff) format(woff), url(../fonts/avenirltstd-heavy-webfont.ttf) format(truetype), url(../fonts/avenirltstd-heavy-webfont.svg#AvenirLTStd85Heavy) format(svg);font-weight:400;font-style:normal;}@font-face{font-family:AvenirLTStd35Light;src:url(../fonts/avenirltstd-light-webfont.eot);src:url(../fonts/avenirltstd-light-webfont.eot?#iefix) format(embedded-opentype), url(../fonts/avenirltstd-light-webfont.woff) format(woff), url(../fonts/avenirltstd-light-webfont.ttf) format(truetype), url(../fonts/avenirltstd-light-webfont.svg#AvenirLTStd35Light) format(svg);font-weight:400;font-style:normal;}@font-face{font-family:AvenirLTStd65Medium;src:url(../fonts/avenirltstd-medium-webfont.eot);src:url(../fonts/avenirltstd-medium-webfont.eot?#iefix) format(embedded-opentype), url(../fonts/avenirltstd-medium-webfont.woff) format(woff), url(../fonts/avenirltstd-medium-webfont.ttf) format(truetype), url(../fonts/avenirltstd-medium-webfont.svg#AvenirLTStd65Medium) format(svg);font-weight:400;font-style:normal;}
/*--------------------------------------------------
                   cssstickyfooter.com
	-------------------------------------------------- */
html,body{height:100%;}#wrap{min-height:100%;}#main{overflow:auto;padding-bottom:150px;}footer{position:relative;height:140px;margin-top:-140px;clear:both;}body:before{content:"";height:100%;float:left;width:0;margin-top:-32767px;}

So far, I’m convinced that sticking with the basics is the way forward. The simpler the code is, the more semantic it can be. This means it’s leaner, faster, easier to understand, and easier to maintain. Why make it harder?

$(function(){
	var a = 0, b = 1, c, s = ' ';
	$('body').append(a + s + b + s);
	for (i = 1; i <= 20; i++) {
		c = a + b;
		$('body').append(c, s);
		a = b;
		b = c;
	}
});

That’s not bad. It works as it should, but I can’t help thinking that I can do better. I’m sure I can build the same but using only one append method. I’ll try again…

$(function(){
	var a = 0, b = 1, c, s = ' ';
	for (i = 0; i < 20; i++) {
		if (i < 2) {
			c = i;
		} else {
			c = a + b;
			a = b;
			b = c;
		}
		$('body').append(c, s);
	}
});

That feels better. Kind of. At least now we’re not hard-coding the first two Fibonacci numbers. But somehow, this version is longer than the first. Maybe I could put that if statement on a diet…

$(function(){
	var a = 0, b = 1, c, s = ' ';
	for (i = 0; i < 20; i++) {
		c = (i < 2) ? i : a + b;
		a = b;
		b = c;
		$('body').append(c, s);
	}
});

Much nicer! I’m sure it could be improved further (for a start, by removing the HTML non-breaking space), but I think that’s lean enough for now.

First, a lovely piece of ingenuity from Paul Irish, the creator of HTML5 Boilerplate (among many other things):

<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>

Obviously, that’s how the beginning of your document should look. Using this technique means you can also have all your IE hacks in your main stylesheet (conditional stylesheets are so uncool). Now we can detect the browsers that we don’t like with a bit of jQuery when the page loads:

$(function () {
	"use strict";

	// Detecting IE
	var oldIE;
	if ($('html').is('.ie6, .ie7, .ie8')) {
		oldIE = true;
	}

	if (oldIE) {
		// Here's your JS for IE..
	} else {
		// ..And here's the full-fat code for everyone else
	}

Happy days!

For those of us that care about screen real-estate, it seems like a real kick in the teeth that we can’t simply disable this ‘feature’. Or rather, we can, but the setting is not in the most obvious of places. Here’s how:

1. Go to chrome://flags/
2. Scroll down to ‘New Downloads UI’
3. Click ‘Enable’

Cool.

This article will document both my successes and fumblings with this project, so revisions will be included. First, I’ll outline the HTML and CSS, since it’s easy and doesn’t really have anything to do with this as a PHP project.

The initial markup:

<!doctype html>
<html>
<head>
<title>Chess</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
<h1>Chess</h1>
<?php 

// Code for building Chess goes here.

?>
</table>
</div>
</body>
</html>

And the styles:

* {margin: 0;padding: 0;} /* I normally wouldn't select elements in CSS with a wildcard operator like this, but stylistically, it's a small project*/

html, body {
	background: #fff url(i/tile.png) repeat 0 0;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

#wrap {
	width: 800px;
	background: #fff;
	min-height: 100%;
	margin: auto;
	box-shadow: 0px 0px 3px 3px rgba(155,155,155,0.5);
}

h1 {
	font-family: 'Shadows Into Light Two', cursive;
	padding: 40px 0 20px 73px;
}

table {
	border-collapse: collapse;
	margin: auto;
}

table, td {border: 1px solid #404040;}

td {
	width: 80px;
	height: 80px;
	font-size: 45px;
	text-align: center;
	line-height: 80px;
}

.grey {background: #f0f0f0;}

So far, so good. My first attempt only involved programming the board. I knew the chessboard would be eight columns wide, and eight rows high, so I tried drawing it with a for loop. I knew that each alternate cell in a row had to be a different colour, and that each alternating row had to offset its alternately coloured cells by one. With that in mind, I tried determining whether each cell and row had an even or odd index with the help of a couple of modulus (%) operators.

<table>
<?php
for ($rows = 1; $rows <= 8; $rows++) {
	echo '<tr>';
	if ($rows % 2 == 1) {
		for ($cells = 1; $cells <= 8; $cells++) {
			if ($cells % 2 == 0) {
				echo '<td class="grey"></td>';
			} else {
				echo '<td></td>';
			}
		}
	} else {
		for ($cells = 1; $cells <= 8; $cells++) {
			if ($cells % 2 == 1) {
				echo '<td class="grey"></td>';
			} else {
				echo '<td></td>';
			}
		}
	}
	echo '</tr>';
}
?>
</table>

At first, I included a bunch of PHP \n (new line) and \t (tab) commands so my HTML source would look neater, but I’ve left it out now so the PHP is neater. This is what the code outputs so far.

The next step is to plot out all the chess pieces on the chessboard. My colleague mentioned that the chess piece coordinates would ordinarily come from a database, but that I could use arrays to emulate that for now. I decided to create a multi-dimensional array, consisting of an array for each row of the chessboard. I could then simply plot my chess pieces manually in each array with variables that contain the HTML entity, or an empty string if there is no chess piece in a given cell.

<?php
$wKing		=	'&#9812';
$wQueen		=	'&#9813';
$wRook		=	'&#9814';
$wBishop	=	'&#9815';
$wKnight	=	'&#9816';
$wPawn		=	'&#9817';
$bKing		=	'&#9818';
$bQueen		=	'&#9819';
$bRook		=	'&#9820';
$bBishop	=	'&#9821';
$bKnight	=	'&#9822';
$bPawn		=	'&#9823';
$empty		=	'';

$c1 = array($bRook, $bKnight, $bBishop, $bKing, $bQueen, $bBishop, $bKnight, $bRook);
$c2 = array($bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn);
$c3 = array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty);
$c4 = array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty);
$c5 = array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty);
$c6 = array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty);
$c7 = array($wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn);
$c8 = array($wRook, $wKnight, $wBishop, $wKing, $wQueen, $wBishop, $wKnight, $wRook);
$cBoard = array($c1, $c2, $c3, $c4, $c5, $c6, $c7, $c8);
?>

That looks great! But now how do I position my chess pieces on the chess board?

“That’s.. Not bad..” is my feedback from Marco.
“Here’s how I would have done that array:” he continues.

$cBoard = array(
	0 => array($bRook, $bKnight, $bBishop, $bKing, $bQueen, $bBishop, $bKnight, $bRook),
	1 => array($bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn),
	2 => array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty),
	3 => array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty),
	4 => array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty),
	5 => array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty),
	6 => array($wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn),
	7 => array($wRook, $wKnight, $wBishop, $wKing, $wQueen, $wBishop, $wKnight, $wRook)
);

Marco reviewed my loop and decided it’d be a little more elegant if I used foreach loops. He also managed to draw the table and plot the chess pieces, using a similar modulus idea. He managed it in 17 lines of code, and admitted it wasn’t so great because a lot of code was repeated. It took a lot of staring at the chessboard before the penny finally dropped. My new idea was neatest, and worked! Eureka moment!

<?php
foreach ($cBoard as $y => $row) {
	echo '<tr>';
	foreach ($row as $x => $cell) {
		$class = (($x+$y) % 2 == 1) ? ' class="grey"' : '';
		echo '<td'.$class.'>'.$cell.'</td>';
	}
	echo '</tr>';
}
?>

To clarify, the code looks inside the $cBoard array and for each index it finds, it spits out a pair of HTML table row tags (lines 2, 3 and 8). While it’s inside each table row, it runs through its respective array and assigns each value a variable name of $cell. The cells know whether they are at an even or odd coordinate because I’m using a modulus against both the x and y values at the same time. The shorthand if statement sets $class depending on whether the if statement returns true or false. I then simply echo out the value of $class and $cell, and wrap them in some HTML table data tags. Simples!

So far, the result looks like this, and the code looks like this:

<!doctype html>
<html>
<head>
<title>Chess</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
<h1>Chess</h1>
<?php
$wKing		=	'&#9812';
$wQueen		=	'&#9813';
$wRook		=	'&#9814';
$wBishop	=	'&#9815';
$wKnight	=	'&#9816';
$wPawn		=	'&#9817';
$bKing		=	'&#9818';
$bQueen		=	'&#9819';
$bRook		=	'&#9820';
$bBishop	=	'&#9821';
$bKnight	=	'&#9822';
$bPawn		=	'&#9823';
$empty		=	'';

$cBoard = array(
	0 => array($bRook, $bKnight, $bBishop, $bKing, $bQueen, $bBishop, $bKnight, $bRook),
	1 => array($bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn, $bPawn),
	2 => array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty),
	3 => array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty),
	4 => array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty),
	5 => array($empty, $empty, $empty, $empty, $empty, $empty, $empty, $empty),
	6 => array($wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn, $wPawn),
	7 => array($wRook, $wKnight, $wBishop, $wKing, $wQueen, $wBishop, $wKnight, $wRook)
);
?>

	<table>
	<?php
	foreach ($cBoard as $y => $row) {
		echo '<tr>';
		foreach ($row as $x => $cell) {
			$class = (($x+$y) % 2 == 1) ? ' class="grey"' : '';
			echo '<td'.$class.'>'.$cell.'</td>';
		}
		echo '</tr>';
	}
	?>
	</table>

</div>
</body>
</html>

It doesn’t do anything

So, I’ve coded myself what is essentially a picture of a chessboard. None of the pieces move, and I’d like to change that. At this stage, I imagine that trying to animate chess pieces with PHP is probably not such a fantastic idea. Even if I knew how to do that, my understanding is that every attempted chess move would initiate a server request. That’s probably fine for myself and a friend, but it’s not exactly scalable. If my chess game became popular, I’d have to start paying through the nose for hosting.

I’ll take a shot at this problem with jQuery. After many hours of shuffling code around, I came up with some ideas. The logic should play out roughly as follows:

• Select a chess piece, store its value, and make it invisible
• Create a clone of the chess piece, so it can be animated
• Insert the chess piece value into the destination cell, but don’t show it
• Animate the clone to the destination cell
• Show the chess piece value in its new cell, and destroy the clone

And here’s what I came up with:

$(function () {
	"use strict";

	// Highlight cell
	$('td').hover(function () {
		$(this).css('background-color' , '#0ff');
	}, function () {
		$(this).css('background-color' , '');
	});

	var moving = 0, piece, depart, origin, x, y, clone;
	$('td').click(function(){
		if (moving === 0) {
			// Select chess piece
			if ($(this).text()) {
				piece = $(this).text();
				$(this).html('<span class="ghost">' + piece + '</span>');
				clone = '<span id="clone">' + $(this).text() + '</span>';
				x = $(this).offset().left + 1 + 'px';
				y = $(this).offset().top + 1 + 'px';
				$('body').append(clone);
				$('#clone').css({'color':'blue', 'top':y, 'left':x});
				origin = $(this);
				moving = 1;
			} else {
				return false;
			}
		} else {
			// Move chess piece
			if (!$(this).text()) {
				x = $(this).offset().left + 1 + 'px';
				y = $(this).offset().top + 1 + 'px';
				$(this).html($('.ghost').parent().html());
				origin.html('');
				$('#clone').animate({'left':x, 'top':y}, 800, 'swing', function(){
					$('.ghost').replaceWith($(this).text());
					$('span').remove();
					moving = 0;
				});
			} else {
				return false;
			}
		}
	});

});

### This article is a work in progress. I’ll update it as I find my way through the project.

LESS gives you a few compilation options, but I’m not too keen on most of them. There is a JavaScript compiler, but why force the user to compile client-side? What if they have JS disabled? Everything is ruined. Also, the LESS documentation states that you should use a different rel attribute, like this:

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

I’m quite sure though, that this causes serious rendering problems for IE7 (which is still an important browser, as my colleagues have taught me).

That’s enough of the wrong way. Here’s the right way:

Your WordPress child theme should include:

• A header.php file, for the compiler.
• A style.css file so WP recognises the child theme.
• An input.less file, for the LESS code.
• The LESS PHP compiler file: lessc.inc.php.

The header.php file should begin with:

<?php
require 'lessc.inc.php';

try {
    lessc::ccompile(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'input.less', dirname(__FILE__) . DIRECTORY_SEPARATOR . 'output.css');
} catch (exception $ex) {
    exit('lessc fatal error:<br />'.$ex->getMessage());
}
?>

…And the style.css should only include something like this:

/*
Theme Name:     YourThemeName
Description:    This is a theme you built with LESS CSS
Author:         Jezen Thomas
Author URI:     http://jezenthomas.co.uk
Template:       twentyeleven
*/

@import url("output.css");

So drummers, what are you waiting for? Check it out now.

That particular transcription – along with a few others – is available for instant download from http://drumsnotated.com.

It’s a wonderful system; you choose the transcription you want, and it is automatically emailed to you immediately after purchase.

Enjoy!