Modular, Maintainable & Reusable HTML and CSS

Why Does This Matter?

Up until recently I’d never dug too deeply into the fantastic world of completely maintainable and reusable HTML and CSS, however once I’d read a few posts and talked to a few people on the matter it completely changed my mind.

I spend most of my days coding with HTML, CSS, jQuery and PHP, the classic combination of languages. When coding in PHP I’m always focused on an object-oriented approach, but with HTML and CSS I’ve always been more interested in making it work my way, let me tell you now, I was wrong.

Coding with an OO (object-oriented) mindset has always been thought of, at least from my perspective, as being a big deal when you’re working with large amounts of (usually back-end) code, like PHP or JavaScript. However the mindset of re-usability shouldn’t stop there, because when you start to realise the power of maintainable HTML/CSS, your workflow and coding time will sky-rocket.

---

Good Code Comes From Lots of Practice

When you first reach that point when you start to really love the code you’re writing, you get the feeling where you just want to improve and improve and improve, yet that will not happen over night.

In all truth good code does come from practice and there’s no other way to get a decent amount of practice time than to just build websites.

When I wanted to improve my skills at full WordPress development, I created a (still in-progress) WordPress theme called Bebel. It’s teaching me a lot about the back-end architecture of WordPress and how to integrate my own plugins and functionality with the core.

So the best thing I can suggest is to just go and make something. You never know, it might turn into a feasible product in the long run.

---

Don’t Forget About The Next Person

When you create a site, especially if it’s a site that isn’t yours, then making it easily updatable and maintainable should always be a high priority. Just think, what’s going to happen if you’re the only one who can read the CSS file properly? It may work for you, but if I try to help you out, I might not even know where to start.

Coding not just with OO principles but also modular principles is what sets good and great work apart. Having code that can be copied and pasted from a style guide is going to save you a lot of time and money down the road, since having to create brand new components every time you need to add something to the site or app is going to lead you down a road of code bloat with a massive headache to complement it.

I’m sure there have been times when every developer has looked at code created by someone else and thought:

Damn! Where do I even start?!

When you encounter this it should make you think about something very important, does your code give others that same feeling? If the answer is yes then it’s time to change.

---

Get On The SCSS Bandwagon

So you’ve heard of SCSS and how much everyone loves it right? Yet you’re still unsure? If this is the case then I’m going to tell you how pushing myself to understand SCSS (specifically SASS) has helped me more than I could’ve possibly imagined.

When I first heard about this whole SCSS thing I didn’t like the idea, but that’s because I’m not always very fond of change, which is something I’m working on. I was talking to a colleague at work who was going on about how great it is, since she is someone I respect immensely I decided to give it a go.

What I found was an amazingly well-rounded syntax that was actually quite similar to PHP in many regards. You’ll notice that when you start using SCSS that it can be a little daunting. Since there are so many new types of techniques you need to understand. Although with a good knowledge of CSS it’s quite a quick learning process, which then pays off dividends.

---

Make and Use a Style-Guide

Why do I say make and use? Well the answer is simple, it can be very easy to create said style-guide only to not follow it yourself. Just because you created the components, the elements and the guide itself, doesn’t mean you get to bend the rules.

Easily maintainable code comes from a certain mindset. If you haven’t got that mindset you need to learn and grow as a developer. Therefore if you don’t have that mindset you shouldn’t be heading a project that calls for it. That’s not to say you shouldn’t work on a project with this mind-set however, but you need to learn the proper way to approach certain areas before you get to have complete control.

I’m currently going through the process of re-coding the Assembla site, (which is where I work as a front-end developer). One thing I did before I even touched that first line of code was study, study and study some more. I made sure I knew what I was doing before I started. That way when it came time to make decisions I could rely on my own opinion.

---

Conclusion

I hope more people start picking up the modular, maintainable and reusable mindset. However it’s something that’s learned, you can’t just grab a mindset from a shelf and be on your way. You have to grow into a mindset and then grow even more once you’ve got it. Hence why I believe there is no “top-level” for front-end development. The more you learn the better you are, but there is always more learning to be done.