The following is an except from: socket-two.com.

Standing at the end of the second decade of the second millennium, and surveying the front end web development scene, scores of frameworks, methodologies, and miscellaneous technical solutions can be seen scurrying over each other, reaching upwards and outwards for the prizes of validation, market share, and architectural elegance. Crowds of developers look on - some cheering for their favourites, others feeling bewildered by the sheer amount of new blood, perpetually holding onto their gold until they have fully studied every investment option.

Webpack holds a gleaming silver sword up to the sun and cries out, while gulp sits beside her on a chariot marked 'node'. He adjusts his armour and wonders a little nervously if they are really on the same side or not. A middle-aged Grunt plods slowly around the arena circumference with tree-trunk limbs, bashing away any lingering obstacles with its buckler.

In the raised centre, a wild-eyed, long-haired, juggernautian React has temporarily floored Angular, and stands tall to strike a pose. A round of chanting swells, in admiration of the gladiator's power and grace. However, a younger, more nimble contender named Vue casually ambles up the slope to where they preside, and prepares to enter the hottest part of the fray with a confident, but unassuming disposition.

Although most theatre-goers have their attention directed towards the centre of the stadium, a rather novel skirmish has developed near the entrance among the gladiatorial animals, and is beginning to draw substantial interest. Atomic, the fox, is biting at the ankles of BEM the bear. The commotion attracts a couple of tigers and a lion. A woman dressed in fashionable robes, standing to your left, notices you watching, and shouts into your ear.

"He'd better be okay! I have 150 gold bet on this bear leaving the stadium with blood still in it's veins!".

Another well-dressed man nearby chimes in. "The fox is no threat." He exclaims loudly. "I have 250 gold on that bear, and I'm not at all worried! It can handle an adversary of any size!"

"I have 5 on the fox.", pouts a boy with shabby hair, turning around with an indignant countenance. "What about you, old man? What do you think of the animals?"

The elderly figure standing on your right looks slightly bewildered and blinks a few times, as if waking from a dream. "It's all Greek to me...", he croaks into the air, while eyeing the horizon. "In my day, we didn't even have animals in the stadium."

CSS: A blank canvas

For an arena where one fully-fledged programming language clearly dominates, front end development houses a surprisingly large number of actively-competing software packages and methodologies. This can be frustrating to a developer, when the onus of knowing them all may rest upon their shoulders. However, its also a wonderful thing to behold, as it is a testament to the beautiful, boundless flexibility of javascript as a language, and also the industrious spirit of the community.

However, this article is not about Javascript. It is about an entity that is afflicted by a similarly wonderful problem: CSS.

The CSS specification gives us a declarative language that is, in essence, incredibly simple to understand and write. But as with javascript, when the language is employed on larger projects, its simplicity, flexibility and unopinionatedness can give rise to illogical, labyrinthine codebases, if not wielded carefully. Devising a strategy to manage complexity is a responsibility that is wholly appointed to the developer - or the development team and community, if deferred to.

This brings us to our point of departure.

How can a lone developer, or development team, avoid the emergence of unmanageable or unnecessary complexity when writing CSS for projects of non-trivial size? Where techniques differ, what are the merits of each?

Up until recently, there were no formalised systems to help developers manage CSS complexity. In the past, stylesheet authors were only guided by their own opinions of the CSS specification, and by unofficial, naturally-emergent best practices which were cultivated by their fellows - typically expounded within books, articles, and chatrooms.

Today, several formal CSS organisation systems exist. Most are similarly unofficial. Among them are BEM, OOCSS, SMACSS, MCSS, AMCSS, Atomic CSS, and the irreverently-named, FUN CSS. BEM and Atomic CSS are paticularly interesting studies, as they are among the most popular, (or most infamous, depending on who you ask), and also the most unconventional. BEM is particularly relevant in our enquiry, as it was specifically designed to tame voluminous CSS codebases.

With this in mind, this discourse will examine two types of CSS organisation practice - those categorised as sets of general rules, and those categorised as formalised systems.

Full article: socket-two.com.