Don’t Reinvent the Wheel & Stay DRY with CSS and JavaScript Frameworks
When you build a home, the most important thing to do is to set up the foundation. Without it, the house will collapse, no matter what color your couches are or how much your furniture costs.
A website is no different. As a freelancer, I know that designing a robust foundation is the first step toward a scalable, stable, reliable project.
One of the most common mistakes many newbies make is to write new code for every single function, accumulating tons of lines of code which make the whole structure heavy and difficult to update.
The 2 golden rules
As a developer, there are only two rules you need to follow:
1. Don’t reinvent the wheel
2. Stay D.R.Y.
Don’t Reinvent the Wheel
Since the Internet has been around for more than 20 years, it’s likely that the function you’re writing has already been written by someone else – someone who might have more experience than you. If you want to implement a slideshow, building a Jquery plugin from scratch might not be the best idea.
One of the biggest consequences of the Internet is the huge open-source community, which has developed every imaginable kind of plugin and framework in every possible programming language. Don’t be a superhero; take advantage of it.
Stay D.R.Y.
A well-known acronym in the developer community, D.R.Y. stands for “don’t repeat yourself. ” Whenever you develop a website or application, you’ll likely need to use the same fragments of code over and over.
For example, any project will have buttons, inputs, and other common elements that appear multiple times, perhaps with slight variations. Instead of creating dozens of different CSS classes sharing the same code, the D.R.Y. approach suggests the creation of one basic class with several variations.
Let’s look at a practical example:
Suppose we want buttons on our website in three different colors.
An inefficient approach would be to write three classes, one for each combination:
.button-blue {
color: #fff;
border: solid #ccc 1px;
border-radius: 3px;
margin: 0;
font-size: 1em;
padding: 5px 10px;
background-color: #2980b9;
// other properties
}
.button-red {
color: #fff;
border: solid #ccc 1px;
border-radius: 3px;
margin: 0;
font-size: 1em;
padding: 5px 10px;
background-color: #e74c3c;
// other properties
}
.button-green {
color: #fff;
border: solid #ccc 1px;
border-radius: 3px;
margin: 0;
font-size: 1em;
padding: 5px 10px;
background-color: #27ae60;
// other properties
}
Our HTML code would reference these classes this way:
<button value=”send” class=”button-blue”> <button value=”send” class=”button-green”> <button value=”send” class=”button-red”>
The D.R.Y. approach, on the other hand, reduces these repetitions. In the example above, the three classes share a lot of code. We can then rewrite them like this:
.button {
color: #fff;
border: solid #ccc 1px;
border-radius: 3px;
margin: 0;
font-size: 1em;
padding: 5px 10px;
// other properties
}
.button.blue {
background-color: #2980b9;
}
.button.red {
background-color: #e74c3c;
}
.button.green {
background-color: #27ae60;
}
And we can reference these classes in our HTML code in this way:
<button value=”I’m a blue button” class=”button blue”> <button value=”I’m a red button” class=”button red”>
You can instantly see how the D.R.Y. solution uses less code and is more elegant. We can add new colors by adding one line of code to our CSS file – but this isn’t the only advantage. Suppose our buttons can have different sizes: small, medium (the default) and large. We can easily write CSS classes that override the padding and font-size to create unlimited sizes.
.button.small {
padding: 3px 7px;
font-size: 0.8em;
}
.button.large{
padding: 10px 15px;
font-size: 1.2em;
}
Now we can mix the color and size to create different combinations of buttons, like this:
<button value=”I’m a small blue button” class=”button blue small”> <button value=”I’m a standard green button” class=”button green”> <button value=”I’m a large red button” class=”button red large”>
If you were writing a new class for each specific combination you would end up with nine classes sharing the same code, apart from little details. Using the D.R.Y approach we’ve saved lines of code and we have built a scalable CSS file where we can change and add colors and sizes with just a few lines of code.
The Perfect Solution
How do you mix these two golden rules and get the most out of them? Frameworks.
A framework is a pre-prepared, standards-compliant, reusable, extensible solution for building your project. You can easily find frameworks for CSS, Javascript, Ruby, PHP and any other language you can think of.
More specifically, a framework is a set of pre-tested rules for the most common activities in development.
Learning a framework might not be easy at first, because each has its own syntax and rules. In the long term, however, the effort is well worth it: you’ll increase the speed of your development by a factor of 10 by focusing only on the things that matter.
I know that right now you’re probably wondering two things. When should I use a framework, and which one?
When should you use a framework?
Always, unless your website requires so little code that it’s not worth using an entire framework.
Which framework should you use?
As a rule of thumb you should pick up a good framework for both your CSS code and your JavaScript . For the CSS, Bootstrap and Foundation are the king and queen of front-end development. I personally prefer Foundation, but they are both awesome.
Regarding the JavaScript frameworks, either Bootstrap and Foundation have a good set of JavaScript plugins built in. For a small project or a mockup I suggest to use them. For bigger projects and specific applications, I would recommend big and widely used frameworks like AngularJS and BackboneJs.
Here and here you can find a list of the most popular CSS and JavaScript frameworks.
Conclusion
Building a scalable and maintainable website or web-application can be tough, but with right tools you can dramatically improve your results. Spend one afternoon looking for the frameworks that better fit your needs. Learn how to use them. You’ll need time, but you can bet it will worth it.
My last project, CampusBoard, has been built on these principles and the result is a stable and scalable platform which requires minimal effort to be updated and maintained. More specifically, we have used Ruby on Rails for the back-end, Foundation and JQuery for the front-end. Now we can add new features in literally no time, improving our productivity by a factor of 10.
Need Manuel’s help? Book an 1-on-1 session!
