Modular and Maintainable frontends
or
"How not to make a mess"

Andy Mantell - Freelance Web Developer

Twitter: @andymantell

http://www.andymantell.com

"Lego bricks" by Paul Wilkinson

Tales of woe...

You take on a new client and inherit a site with a few years of legacy code on board.

"jenga jumble" by Robert S. Donovan

How did we get here?

Alive and well

How did we get here?

Thinking in a modular way

Writing a 5000+ line CSS file is not ok any more (Was it ever?).

I don't care that you "hand crafted" it. I can't read it.

Tables of contents are a sticking plaster. Someone, somewhere, will fail to maintain it and it instantly becomes useless.

Split up into partials. Use the file system to file things according to a system.

Documentation.

Just write loads of comments right?
Everyone sure loves reading them.
The more the better!

Documentation

Keep writing comments (with the emphasis on quality, not quantity.)

Remember, Why, not What.


But we can do better than this...

Style guides

Style guides

Demonstrate all available form styles

Style guides

Document components and their JavaScript interactions

Style guides

Document your grid system

Spaghetti CSS

"Spaghetti with tomato sauce" by HatM

Contextual styling

Contextual Magic styling

BEM: Block, Element, Modifier

Forewarning - it's about to get ugly! Try and look past this and concentrate on the utility of the naming conventions! The exact syntax using underscores and hyphens is incidental, and alternatives exist...

"Ugly fruit" by Gunnar Grimnes (cc)

Encouraging modularity & predictability with BEM

Encouraging modularity & predictability with BEM

Encouraging modularity & predictability with BEM

Encouraging modularity & predictability with BEM

Encouraging modularity & predictability with BEM

Considering the earlier contextual styling example:

Encouraging modularity & predictability with BEM

BEM would simply flip this on it's head and use a modifier class to define this component variant:

Encouraging modularity & predictability with BEM

Avoid unnecessary specificity

Encouraging modularity & predictability with BEM

We can now directly reference the header with it's class

This has lower specificity and so creates less headaches for us later. It can be overriden with a single class, rather than having to match the specificity of the original rule.

Quick side note on specificity and IDs

They may seem harmless but IDs have a naturally high level of specificity and can force you to overspecify later. Or frustration might lead a developer to use !important. That is your fault, not his.


Encouraging modularity & predictability with BEM

Styling the Element class directly reduces it's specificity allowing us to override it easily without excessive selectors


Encouraging modularity & predictability with BEM

Or even a modifier directly on the heading…


Encouraging modularity & predictability with BEM

BEM can seem repetitive to write:

Encouraging modularity & predictability with BEM

Knowing when and what to "BEM" is a balancing act.
Try and encode the useful information at any point.

This isn't "wrong"...

Encouraging modularity & predictability with BEM

Key word here is encouraging.

Still no way to "force" future developers to treat your code with respect and not make a mess.

However the more you help them by laying good foundations, the more likely they are to do a good job.

Mess breeds more mess.

Rationalisation

"Standard Measures At 62 Farenheit" by the justified sinner (cc)

Rationalisation

Tip: Before you embark on this next step, make friends with your designer first!

Open discussion and collaboration with the designer.

Rationalisation

Output from graphic design tools is inherently inconsistent.

This is categorically not a criticism of any designer. It is purely an acknowledgement that as a tool, they allow arbitrary adjustments to be made that may not fit a consistent global set of rules.

We're all human, it happens.

Rationalisation

This output is at loggerheads with the way CSS likes to work. Our goal is to define consistent rules across the site, not to continuously be building exceptions.

Talk to your designer - did he mean to override the bottom margin to 18px there? It's 20px everywhere else, do we code an exception here, or assume 20px?

Rationalisation

2 way communication.

Make progress visibile - let the designer check as you go.

Simplification aids maintainability - ensures long term fidelity of designs. Not just "does it look like the comp now?"

Sometimes that means stopping short of 100% pixel perfect reproduction. Make the right compromises.

TLDR;

Reading list

Questions?