Counting Lines of Code in CSS

After using Project Wallace for quite some time, I found it hard sometimes to compare projects. For example, Facebook.com’s CSS is way larger than that of Twitter.com, but that’s because it has some base64-encoded fonts inlined in their @font-face declarations and parts of either website aren’t minified. So what is the best option to compare project sizes at a glance? Other programming languages have figured this out before: the Lines Of Code metric.

What is Lines Of Code

From Wikipedia:

Source lines of code (SLOC), also known as lines of code (LOC), is a software metric used to measure the size of a computer program by counting the number of lines in the text of the program’s source code.

So we use SLOC to determine the size of bunch of code. This works for CSS too! Let’s discuss LOC and SLOC in relation to CSS.

Lines Of Code for CSS

Lines of Code in relation to CSS is basically all your CSS, split by newlines. It actually just is that for Project Wallace. Checkout the source code for that:

const splitLines = require('split-lines')
const totalLinesOfCode = splitLines(rawCss).length

Note that splitLines() is basically string.split(/\r?\n/).

Source Lines of Code for CSS

There are three things in CSS that are important to keep track of when counting lines:

• At-Rules (@media queries, @font-face rules, @keyframes rules, etc.)
• Selectors (#header, .some-list, h1 > span)
• Declarations (color: blue)

You might wonder why rules aren’t counted here, but rules only consist of selectors and declarations. The source code for counting Source Lines Of Code in CSS is seemingly simple as well:

const totalSourceLinesOfCode = atRules.length + selectors.length + declarations.length

Here is a practical example of counting Lines Of Code in CSS:

/* 2 Source Lines Of Code */
.selector {
	color: blue;
}

/* 4 Source Lines Of Code */
.selectorA,
#selectorB {
	color: red;
	border-radius: 3px;
}

/* 5 Source Lines of Code */
@media (min-width: 400px) {
	.selector,
	.another-selector {
		color: green;
		background: yellow;
	}
}

/* 4 Source Lines of Code */
@media (min-width: 400px) and (max-width: 800px) {
	@supports (display: grid) {
		.deep-selector {
			color: tomato;
		}
	}
}

Closing thoughts

There is still a lot more counting to do, but with regards to Lines Of Code, this is pretty much it. The next step for @projectwallace/css-analyzer is to calculate the cyclomatic complexity for CSS. But that’s a whole different can of worms.