Table of Contents
There are many ways and principles you can use to organize your CSS and JavaScript code. If you are interested in this, you can take a look at one of the previous posts that explores few available options of grouping and ordering your stylesheets. However, today, we will discuss some reasons why organizing your code is a good idea and, if you are not doing already, you may try it too. So, without further ado, let’s take a look …
Search
First and most useful reason to organize your code is better ability to search. When your code follows specific order, it is much easier for you or anyone else to find particular line or property to change it. Organized code is also better to debug and enhance. When your code has a structure, finding errors is not such a pain anymore. What’s more, in case of bigger projects, with time your code will probably grow in size. Just for this reason you should consider bringing some order into your code. Trust me, it is not fun at all to look for some rule in stylesheet containing more than two thousands lines of code.
DRY
Every programmer should be at least familiar with DRY principle. This abbreviation stands for “Don’t Repeat Yourself”. This philosophy will allow you to write shorter, cleaner and faster code. By keeping your code DRY, you will also have a better chance to avoid common pitfalls emerging from overwriting selectors, not paying attention to CSS specificity hierarchy and cascading principle of CSS and, in case of JavaScript, issues like collisions of functions, overwriting variables, mixing up global and local variables, etc. Just for these few reasons it should always be one of your priorities to keep your code in good and short form (ever heard about regexp?).
Teams
Not every designer or developer is working on his own. Some of us are working in teams of various sizes and, especially in these situations, code organization can be food for thought. When you work in team with other developers and designers, it will be easier for everyone to stay up-to-date with the work. Sharing the same style of organizing CSS in your team will allow all team members to work faster and communicate more clearly. This will dramatically enhance team workflow and speed up all processes.
Scalability
If you ever worked with some plugins, no matter if in CSS or JavaScript, it is much more comfortable to work with them if their structure follows some order. Every developer releasing plugins or some snippets of code to public use should always use some rules and principles to organize the code. Good thing to do anytime you release any piece of code and make it free for other people to use is to describe principles used to organize the code. In short, organized code is easier to scale up or include to another projects.
Maintenance
One of the things web designers and developers have to do sometimes is to maintain their codes. This can include projects for clients, offering paid or free services to clients or just taking care about your website (portfolio). When you return to your older projects, you might be surprised by the way you used to write the code. In most of cases, this is not a pleasant surprise and you often spent some time just by refactoring all the code before updating it.
Aesthetics
This aspect may not be so important to everyone, but aesthetics of your code is something you should consider too. Don’t believe the saying that code should be readable only to its author. That is nonsense. The better programmer you are, the more readable your code should be. Think about readability as about a test of your skills and knowledge. Great programmer should be able to solve complex problems with short and understandable code. Aim for cutting out all unnecessary lines of code and always debug and refactor your codes.
Teaching
I don’t assume that all of you are teaching or mentoring web designers or developers starting out in our industry. For those of you who do, by following some rules of structuring your code, it will be easier for your students and apprentices to follow the flow and learn. It will also save you some time since you will not need to explain every line of code. Quite win-win situation! What’s more, every mentor should show his student how to write good code and the best way to do that is by example. So, what are you waiting for?
Summary
There are many reasons why you should consider applying some kind of organization to your code. We took a look at only couple of them and I’m sure that you will be able to come up with much more. When you mention organizing code to some people, they might argue that it takes time to organize the code and to get used to it. This is true. In the beginning it can be hard and time-consuming to follow this or that code structure. However, when it become natural to you, you will not need to think about it anymore. It will be automatic.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
