Modular, Maintainable & Reusable HTML/CSS

Modular, Maintainable & Reusable HTML/CSS Articles

Why Does This Matter?

Up until recently I’d never dug too deeply into the fantastic world of completely maintainable and reusable front-end code, 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.

Just Build Websites from Chris Coyier

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.

Sass Website Screenshot

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 and just custom code everything, because that’s the complete opposite of what I’m trying to get across.

Easily updatable and maintainable code comes from a mind-set, if you haven’t got that mind-set then you need to learn and grow as a developer. Even more importantly if you don’t have that mind-set then you should not be in charge of 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 absolutely sure I knew what I was doing before I started so that when it came time to make decisions I knew my own opinion was valuable and not just a personal theory or idea.


Conclusion

I hope that many more people will start picking up the modular, maintainable and reusable mindset in the future, however it’s something that is learned and you can’t just grab a certain 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.

Advertisement


Leave a Comment

Comments (2)

Jason A.

21st, May 2014 at 8:53 am

Not buying everything he says but maintainability starts with basic practices like what Jens Meiert outlines in http://meiert.com/en/blog/20090617/maintainability-guide/. SASS is not even useful in every BIG project.

(By the way, typo in the last section, “Conlusion”.)

Reply

Seb Kay

21st, May 2014 at 9:14 am

Hi Jason, in my experience a lot of what goes into keeping things modular can vary from person to person and project to project. I’d love to hear some of your own practices that you use to help keep your code modular and maintainable.

Also, I’ve fixed the typo 😉

Reply

Pingbacks (6)

[…] Why Does This Matter? Up untill recently I'd never dug too deeply into the fantastic world of completely maintainable and reusable front-end code, however once I'd read a few posts and talked to a …  […]

[…] second thing to keep in mind is that you should be thinking in a reusable and modular fashion, just like you would when coding with PHP, Ruby (on Rails) or JavaScript. Don’t think […]

[…] modular and maintainable code: When I started this design, I was only half-versed in Sass so the code needs some serious […]

[…] having to hunt around a big responsive.css file. Which is a bonus when you’re trying to write modular, maintainable & reusable […]

[…] CSS and especially in SCSS modular, maintainable and reusable code is to the way forward. If you’re not yet convinced of the benefits yet then it maybe time to […]

[…] That’s a wrap! As you can see, it’s pretty straightforward creating a reusable alert component with Sass. While there are a few different ways to approach it, I’ve found this to be the most no-hassle way of creating something that’s maintainable and reusable. […]

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.