As the web continues to evolve and front-end development continues to become even more complicated, the need to adapt and implement processes for workflow grows immensley.
Photoshop is dead
We are well and truly living in the golden age of front-end web development. Photoshop is dying, designers and developers now design on the fly using HTML and CSS. This isn’t to say Photoshop is going away completely overnight, but the transition is well and truly in motion.
As more and more people come across to the code side, processes help ensure there is order amongst the chaos. This is where component driven development can kill two birds with one stone.
BEM
I haven’t made it much of a secret that I love BEM. I was late to the game to be honest and the version of BEM that I personally use is a modified variant of the original which isn’t all too different.
My BEM Variant
.blockName
.blockName--modifier
.blockName-childElement
In conventional BEM, an element that is a child of a block is usually dictated by two underscores. It’s just personal preference, but I can’t stand the sight of double underscores, they look ugly. So I opt for a single hyphen instead and use camelCase for the naming of a modifier, child element and of course, block name.
I believe this particular variant is easier to type, everything follows a more natural order in my opinion.
Component Based Living Styleguides
The next step in a component driven workflow is to use some kind of styleguide, preferably a living styleguide. The general idea here is to develop each individual element in your web application using HTML/JS and CSS. Break up each section of your web application into logical components, below is an example:
<nav class="navigation">
<ul class="navigation-list">
<li class="navigation-item">Home</li>
<li class="navigation-item">Categories</li>
</ul>
</nav>
<form action="/search" class="search" method="POST" role="form">
<input type="text" name="search" class="search-field" placeholder="Search the site...">
<input type="submit" class="search-button" value="Search">
</form>
<div class="media">
<img class="media-image" src="yourimage.jpg" alt="Some Image">
</div>
It is worth noting that not everything should be broken up into a component. A heading for example can be a part of a component and outside of a component, so not everything should be BEM’d. However, it is possible that a heading two within a section block will be smaller than a heading two outside of a component.
The Benefits of A Living Styleguide
The benefits of a living styleguide are you can make changes on the fly and they will accurately reflect real life immediately. Photoshop is good at making things look good, but in most cases, what you see in Photoshop isn’t what you’ll see in a web browser (especially comparing between Windows and Mac).
Another benefit of a component based living styleguide is the self-documenting nature of a styleguide. If you can see and possibly interact with a component, it will speak volumes for how it works. It also allows developer and non-developer team members to add in a feature to a page without needing to know a single line of code.
Encapsulating functionality and style into a component also means if you make a change, it will be restricted to that component only and won’t affect anything else in the page. Using modifiers, you can change the component depending on the context.
