CodeSOD: Class Warfare

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] Forget logs. Next time you're struggling to replicate error, crash and performance issues in your apps - Think Raygun! Installs in minutes. Learn more.