Do Yourself and Everyone Else a Favor: Make Code Maintainable

Front end development is hard. You have to make something look great and also actually work well. Standards are constantly updated, browsers adopt those updates at different rates, and there is an endless stream of new devices that people use to access the Web. Things are always changing.

That’s why developers have to consider maintainability while they code. If we all understand that change is constant, then we have to build things with the expectation that they’ll need to be changed, and soon.

That’s why there is a great deal of focus at Future Insights Live in Las Vegas in June on tools and techniques to make life easier for you, the poor dev who has to mess with your code somewhere down the line, and the user trying to access your content no matter the hardware or connection speed.

“Nobody is doing this stuff perfectly,” said Jason Lengstorf, a front end developer at Copter Labs. “On everybody’s website, you can find something that you can argue is not semantic, or inaccessible. The entire function of the W3C is to argue about the right way to do things. There is no ‘right answer.’

“So our goal as web developers is to find something that is a good enough answer that we’re not excluding any [users], and that we’re not making our lives harder than they have to be,” Jason said.

At FI Live, Jason is giving a talk entitled “Pseudo-element Master Class – CSS,” showing how to get a presentational element to look just right without empty <span> or <div> tags that create bloat and are a pain to duplicate.

“The idea is to build pages that look as good as we want them to look, but that are also accessible to search engines, screen readers, or that don’t create a bunch of semantic bloat and that degrade gracefully,” he said.

“For people who aren’t familiar with pseudo-elements, and who haven’t really played with them, they can seem intimidating, because they kind of seem imaginary. What I’m hoping to do with the master class is to show that this stuff is actually easier than doing a bunch of empty <divs> and <spans.> It makes it more maintainable; it makes it something you can give to your clients.”

Shay Howe, the Director of Product at Belly and author of A Practical Guide to HTML & CSS, believes that good front end development isn’t far from playing with building blocks. Things should be easy to organize, snap into place where needed, and then be easily taken out and swapped for something new.

Image Source: Child Plastic Constructor via Shutterstock.

Shay is teaching a workshop at Future Insights Live entitled “Front End Building Blocks: Reusable HTML & CSS.”

“A lot of times when you’re writing code, and you’re working inside a code base, you’re working on a part of it at a time,” Shay said. “You don’t necessarily see the whole picture, end to end. Sometimes it feels like a bowl of spaghetti, where you see part of a noodle, but you’re not exactly sure where that noodle begins or ends.

“Code can feel the same way. You’re looking at a snippet of code, and you’re not exactly sure where it originated or what its functionality does at the end of the day, you just see a piece of it. It’s really hard to grasp or wrap your head around it sometimes,” he said.

By thinking about code snippets as modular, instead of each piece being unique, it saves time and greatly increases the maintainability of the site. It requires a mindset that is constantly searching for the opportunity to refactor code into an efficient building block.

“When you’re starting a project, you don’t exactly know where things should be modular yet,” Shay said. “You have these components, and over time your code base is going to grow, and it’s going to get a little bit bloated. The idea is that as it grows, you take a step back, you look at it, and you refactor that code. You can say, ‘am I using these styles in more than one place? Can I roll these up into one unique style and share that style across multiple patterns or components of my code base?'”

The result, Shay said, is a site that can scale up quickly and that can be changed without too much hassle.

“If we write our styles modular, we keep them maintainable, and that allows us to make sweeping changes fairly quickly without much detrimental impact,” Shay said. “If you wanted to change a style, the way a component looked, and we have our styles set in a fairly modular way, we can make those styles once, and that change should take effect on every single component and design on our website.”

The way to do this is to keep an eye on the specificity of your CSS selectors, favor classes, and follow a few key principles Shay will cover during a full-day workshop at FI Live in June.

Adopting this approach, which can be tricky, leads to major gains in productivity, website performance and the maintainability of code. That should make a future version of you much happier.