CSS is one of the most crucial aspects of any web development project. Cascading Style Sheets describe the presentation of web pages including colours, layouts, fonts, and are responsible for enabling the pages to adapt to differing device widths. It's important to write code that is structured, readable, and scalable, particularly on projects which will require changes at a later date, or when working within a team.
Today we will be looking at some simple tips for better CSS coding, so you can look to improve in each of these aspects and save time on your next web development project.
Using icon fonts and SVG assets in your web pages saves a lot of time exporting multiple graphics sizes such as @1x, @2x, and @3x. It also reduces the amount of code to display each asset. As screen resolutions continue to increase, using vector assets sets your web pages up for the future, while keeping your code clean and manageable, and your asset count to a minimum.
Vector assets also have a number of benefits which cannot be offered by their raster counterparts. Firstly, the file sizes are typically very small, resulting in faster loading times. Secondly, it's quick and easy to alter the size of the asset in your code, without ever having to revisit a graphics application. Finally, you can easily edit the color of icon fonts and SVG assets, right within the CSS code itself, saving you both time and effort.
It's so easy to get used to using the latest version of Chrome, Safari, or FIrefox, and forget that people still use older versions and less advanced browsers such as Internet Explorer.
Particularly in many larger corporate workplaces, browsers are not updated as often as in other environments, and therefore it's crucial to test your CSS across a spectrum of these browsers in order to ensure that they appear correctly.
There are a number of useful tools that help you with this process. The first of which is Browser Shots which enables you to see a screenshot of your website in a wide range of different browsers, saving you from having to install each one manually yourself.
Another great resource is Auto Prefixer which allows you to continue to write clean and simple code, and apply prefixes afterward.
It prevents your code from becoming excessively long and complex, while applying the latest relevant prefixes based on current browser popularity and property support.
You can rarely use too many CSS comments. Often the more you include, the better. A CSS comment is surrounded by /* and */ and is ignored by the browser when generating your web page.
The comment explains why this section of code is required, helping a co-worker, or user of a theme identify exactly why it is relevant. The more comments that are applied to section of code such as this, the easier it is for somebody to understand who is working on your file. It's even helpful for yourself to remember why you added a section of code, especially when you are returning to it after a lengthy period.
CSS comments are also useful for breaking up sections of code in order to maintain a well-structured and organized CSS file.
By including comments throughout your CSS file, you can break up the code into manageable sections that are quick and easy to find, and well-spaced to avoid confusion. This is a great habit to form, and will save you plenty of time in the future when you need to go back into a CSS file to make an edit.
This is probably to most important tip I can recommend. Sass is a CSS preprocessor, which basically means you write code in one language, and it is then converted into CSS.
These are just a few of the innovative features included with Sass. It's super easy and quick to setup, and the code is arguably even more intuitive and logical than CSS itself.
Using frameworks can save an extraordinary amount of time. By using the same base of code to start each project, you can ensure you website will be responsive, well structured, and familiar. There are a whole host of frameworks out there including Bootstrap and Foundation. These particular frameworks are very feature-rich and so for smaller projects it is important to use the features sparingly to keep load-times down and the code simple to edit.
Personally, I prefer something more lightweight such as Simple Grid by Zach Cole which prides itself on being responsive, lightweight, and simple. This is also a great way of getting used to using a template to start your development projects, as the aforementioned frameworks can sometimes be somewhat intimidating and overkill for a simpler project.
Next time you begin a web development project, try and implement as many of these simple tips for better CSS coding as you can. It will make your code much easier and quicker to edit, and will save you a great deal of time in the future!
Do you have any simple tips for better CSS coding? Be sure to share them in the comments!