The challenges of coding consistently

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.

Related articles

The voice for change is now louder than ever

Hundreds of Environmental health officers across the country are waiting to hear what the coming months will bring when the Government announce its plans in regards to the expanding of mandatory licensing in England.

The framework has you…

Frameworks are everywhere. They exist in everything we do every day, to help us perform our daily activities.
Your session will expire in xx.xx. Do you wish to Continue or Log Out
Your session will expire in xx.xx
Continue or Log Out