Setting aside cross-browser quirks, CSS is a fiendishly complicated specification. There’s a lot to it. From styling rules and how they interact with the DOM hierarchy, to the complexities of using selectors to navigate the DOM- it’s a complex tool that is also very powerful. I mean, it’s Turing complete.

Shiv works with a self-proclaimed “CSS Ninja”- yes, that was actually in their resume when they got hired. They were hired on the strength of their portfolio- it looked very nice. Unfortunately, the implementation left something to be desired.

For example, imagine you had twenty elements on a page which needed to be styled the same. You might choose to apply a class attribute to them, and create a single styling rule for that entire class. But that’s not what a CSS ninja does.

.placeholder1, .placeholder2, .placeholder3, .placeholder4, 
.placeholder5, .placeholder6, .placeholder7, .placeholder8, .placeholder9, .placeholder10, 
.placeholder11, .placeholder12, .placeholder13, .placeholder14, .placeholder15, 
.placeholder16, .placeholder17, .placeholder18, .placeholder19, .placeholder20 {
	border-top: 1px solid #333333;
	color: #FFFFFF;
	height: 180px;
	padding-top: 15px;
	width: 140px;

That’s right, a true CSS Ninja creates a unique class for every single element you want styled, and then creates a stylesheet rule that selects all of those unique elements. It’s brilliant, because this way, if the style for .placeholder6 ever needs to change, you can just make a new rule for that one.

Bonus Ninja points for using absolute units for sizes and dimensions, which I’m certain is never going to cause a problem rendering on different display sizes.

[Advertisement] Continuously monitor your servers for configuration changes, and report when there's configuration drift. Get started with Otter today!