No matter how skilled as a designer or developer you are, having some workflow in your work process can make every project much easier to manage and also to finish. It also much easier to organize and orient in the code.
Then I take a look at the main CSS file. I wanted to jump of the window at that moment. Another 400+ lines of code without any system or at least one style of indentation. It was one big mix of property/value pairs sometimes on one line and sometimes on two lines. I don’t recommend to anyone to have some strict guidelines (while it is great idea) but when it comes to coding, having at least one style for indentation, commenting and use of white space is very handy.
After what I saw, I was afraid to look at JS files. Luckily, they were in much better condition. After using some online tools for beautifying the code (files were minified), JS was looking quite good. Just some quick refactoring and it should be ok.
What is a proper layout? Well that depends only on you and your style. You can also take a look on internet on some suggestion by other professionals in industry. Create your own or combine the one you like together. My preferred workflow for stylesheets (as addition to using Saas for coding) is quite simple. All I do is to divide the stylesheet into section using comments or multiple files by three categories – Layout, Visuals and Typography. That’s really all, no rocket science. With this simple trick I know exactly where to look at when I need to change some style of the page. What’s more, these names are quite easy to understand so no need for explanation to partners, clients or co-workers. Layout contains everything what is connected to layout and structure of the page – positioning, box model, widths, heights, etc. Visuals covers everything about backgrounds, colors and borders. Typography includes everything text focused. Easy, right?
You can have as many categories as you want. For example, you can have a single file for padding and margins if you like. It only up to you and it’s always better than to have no system at all. In the beginning, it can be little bit harder for you to get used to your new workflow – the more so if you used someone else’s workflow than your own – but later you will be thankful for making this decision.
So… I almost forget what the subject of this article was. Having a proper workflow can help you or anyone else to avoid situations like the one mentioned above.
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 🙂