Most web developers use CCS on a daily basis – This can be a good thing or a bad thing, depending on the organization of your codebase. Larger projects can be a CSS nightmare when not properly organized.
Good CSS etiquette requires well thought out coding principles, a good foundation and a large selection of tools to make your work easier. Each project, individual or team is different so the resources and tips below may or may not apply to your project but most of them can be incorporated into your workflow.
Coding Principles
Usually before starting your project you need to get together with your team members and decide on why and how you will do things. This will lead to a better and longer lasting CSS codebase. You can do this in different ways and styles, according to your needs and preferences. For example, you can use a text file or Google doc that’s shared between team members. It can also be its own website – it all depends on the scale and importance of your project. It’s a good idea to take a look at GitHub, it might help you get started.
CSS Preprocessors
CSS preprocessors can be a huge benefit to your project, if they are used correctly. Less and Sass are some of the most popular CSS preprocessors available. Preprocessors can be very helpful due to their features: limited nesting, multiple files, mixins and variables. Before implementing or using a CSS pre-processor, ensure that all team members are on the same page.
Starting resources
When working on a greenfield project, it’s a good idea to use Normalize.css. Normalize.css helps browsers to render all elements consistently. You can also check Jonathan Neal’s Sanitize.css. Another useful little resource is Bass.css, which is a collection of utilities and base element styles.
Grids
Generally speaking, sites that start of small will continue to grow bigger over time – without a solid grid foundation in place things can become very complicated very quickly. Hence it’s recommended to have simple or complex grid systems within your CSS which will spare you a lot of work in the long run.
Tools
A good foundation and solid principles is the base to creating good CSS. Let’s take it to the next level by using tools to improve our workflow. The most popular tools nowadays are Gulp and Grunt – each of these tools has a selection of features which we can use to provide feedback, manipulate the code and help enforce rules.
Other useful plugins include:
Recess – Developed by Twitter, it is a simple yet attractive code quality tool for CSS
CSS Lint – As the name states, this plugin helps you lint CSS files
PostCSS – One of the most popular CSS processors, currently used by Shopify, Twitter and Google
Page Speed Insights – You can run desktop and mobile performance tests for your site with reporting to help you with building the website.
Gulp and Grunt offer plenty of plugins that not only help your CSS but other aspects of your project as well – it’s highly recommended to spend time and familiarize yourself with these two.
Performance is very important for any online project, so you should definitely check out these tools and speed up your website: SpeedCurve, WebPageTest and Calibre.
The EditorConfig plugin is great when you’re working on a codebase with other developers. This little plugin aligns the coding standards set out by the team leader and ensures everyone is on the right track.
Conclusions
Experience always helps when creating CSS but keep in mind that nothing will ever be perfect. Keep analysing your code in order to ensure proper results and if you ever get stuck simply ask a friend for help.
