Coding. It’s a huge part of the work we produce at Rocktime.
Varying from work we develop for our clients, to constructing our own bespoke Content
Management System. With many web developers like myself working as part of a
team to deliver content, we aim to produce clean & efficient code on a
daily basis.
When I first joined Rocktime, I was introduced to various
techniques for constructing organised code, such as using BEM – a Block Element
Modifier methodology. This works by turning a structured set of HTML classes
into independent modules, or blocks. The purpose of this is to control independent
blocks in a much easier format with a simple naming structure in place, making
the blocks reusable and more efficient to maintain.
The process of using the BEM approach blew my mind – the idea
to change the way we name blocks at HTML-level was so simple that it changed my
entire process with the production of reusable code. Being someone who at times
struggles with providing sensible names to components, I found using BEM allows
me to use more descriptive names that provides an easier way to identify what
purpose the block is particularly intended for.
The other technique I was shown provided a clean CSS
structure using the Inverted Triangle CSS (ITCSS) architecture. This approach
allows us to avoid unnecessary overwriting by reading the CSS from the most
global level, with the default settings of colours and measurements declared
first, then reusable CSS functions and more, all the way through to individual
components.
I have found that using the ITCSS and BEM practices together
really gives a web developer a good consistent template structure to work from,
with the sole purpose of styling components, whilst making projects much more maintainable
for other developers within the future.
Looking back at my code a few years ago before using BEM, it
makes me cringe to see the struggles I have had with producing reusable components in multiple pages of a website. Occasionally I was making a nasty mess with the structure of my code that some of the ‘reusable’ components behaved completely differently from
one web page to the next, relying on dependencies from various parent-based elements
to control the styling. I suppose we have all been here before though... right?!
I’m not saying that these approaches are perfect,
nor are they the only solution front-end developers should use. But from my experience,
it has prepared me to plan the path of producing code a lot more efficiently
than I had been. Eventually there will be newer and improved methodologies & architects
that could further change the way we maintain our projects altogether; its up
to us to keep checking for the best approach that will benefit both for ourselves
and our company.