When you start working as web-developer everything looks pretty simple – small projects, a little amount of pages. But as far as you get more experienced your projects start getting bigger and bigger. More elements and pages lead you to understanding that your CSS code start looking very complex and messy in some parts.
How to deal with it?
There are many techniques and instruments to prettify your code. Let’s make short list of them.
Style guide is a list of recommendation for developing and managing your code. There is great article where a lot of style guides are grouped, you can find it on css-tricks website by this link: https://css-tricks.com/css-style-guides/
Our most favorite one is Google’s one: https://google.github.io/styleguide/htmlcssguide.html#General_Style_Rules .Of course, CSS is hardly connected with html so as usual you will find recommendation for html code there too. Style guides will get your code cleaner and more professional, but are there any other instruments?
Methodology looks like as style guide but with more complex rules which you have to maintain if you decide to use one of them. Our favorite one is BEM.
This mythology makes easier to work with big projects – we highly recommend to check it up.
Preprocessor’s idea is to give you an opportunity to make any complex logic in css code. You get such instruments as mixins, vars, nesting and many others.
There are two most popular preprocessors: LESS and SASS/SCSS. Which is a better one? That’s just a matter of taste, our advice would be to try both of them. Also “Stylus” is very known and easy to use one.
Sitepoint has good article about preprocessors, where you can find much more of them. You can find it by this link: https://www.sitepoint.com/6-current-options-css-preprocessors/
This article is just simple overview on all of those instruments, we will make more detail articles for some of our most favorite instruments In the future.
Dive deep into CSS World – it’s so interesting!!!