Keeping your project in a good shape and maintainable form is important task for every web designer and developer. Today, we are going to look at various ways to achieve this, so you don’t have to decipher your code every time when you look at some older projects. The main goal of this post is to rather make you think about your work process, not to dictate you how you should work. So, use whatever you want or like and eliminate the useless.
Development Vs Production
First thing to talk about is the difference between development and production version of code. If you’ve ever worked with some library (jQuery, Modernizr) or framework (Bootstrap, Foundation, Ember.js, AngularJS) you probably already noticed that when you want to download the code you are provided with two (or more) options. First is to download / use the development version of the code or production version of the code.
The difference between those two is in the way it has been processed and its size. Production version is always minified and so its size is much smaller. For those of you who have no clue of what minification is. It is a process, done by some tools or scripts, during which all white space and comments are removed from the code. The result is dense piece of code put on one line. With this process the size of your CSS and JS files can be compressed in range between 30% to 90%.
The first thing to consider is to have two versions of your code. One for production (minified) and another for development. The production will be used for uploading to servers live, while the development will be intended mostly for you. With this approach, you will be free to use comments and other ways to mark or disable pieces of code without worrying about the final size (they will not be included in production version). You will also be able to adjust the comments to your own style and language without the need to mark it PG 18+.
One last thing to minification. While it is very good practice for CSS and JS files, it is almost useless for HTML. Final size will not differ so much and website will be almost unreadable. In other words, it is almost waste of time. Now let’s look at the individual parts.
Since the HTML is the structure or foundation of every website (or XHTML), the best practice is to always use valid code and avoid depreciated tags. If you think in more holistic way, which you should, next aspects are proper accessibility and good SEO. Your responsibility here is simple. Always stay up-to-date with your industry and be willing to learn new things. Being an early adopter and experiment with new features of HTML is good and it will give you an advantage, but I will leave this to you to decide on.
The easiest and fastest thing you can do is to use comments (for development version) to group blocks of CSS rules according to certain subject. Categories often used among developers are layout, typography, colors, base, etc. Putting similar rules into one group and on specific place inside stylesheet will make it easier for you to make additional adjustments and modifications later on. Additional thing is to also adopt some style of coding. Personally, I use code guide created by @mdo. Getting used to it can be harder in the beginning, but beneficial in the future.
I don’t suppose that all of you are using or are familiar with some of CSS or HTML preprocessors. However, it is still topic important enough to at least mention. For CSS, three most often used preprocessors are Sass, LESS and Stylus. We’ve already explored Sass earlier in a crash course. Here, you can apply all that was suggested for either HTML or CSS with one exception. Preprocessors offer you few great features for enhancing your workflow. For example, creating variables, mixins and placeholder selectors (Sass) and also importing another stylesheet. Even though CSS provide importing as well (@import rule), its support is lousy for old browser and it demands more performance.
This is not an issue with preprocessors. You can split your code according to the subject (variables, mixins, typograhy, colors, layout, reusable elements, etc.) and import them as you need into main file that will be later on converted into one big CSS file. This is, I guess, the best thing you can do to keep your projects (especially the big one) in reasonable and comprehensible form.
Optimize them. No matter how many images you have, always use some tool to optimize and reduce their size. For smaller images like icons merge them together into sprites. Why have twenty icons in twenty files if you can put them into one single optimized sprite? Benefit will be much lower traffic and much higher loading speed.
The one and most important goal of best practices, no matter your work, is to keep everything maintainable. That is what you should keep on your mind while thinking about implementing some advice into your process. Remember, development and production.
Do you have any questions, recommendations, thoughts, advice or tip you would like to share with other readers of this blog, and me? Please share it in a comment. You can also send me a mail. I would love to hear from you.
Did you like this article? Please subscribe.