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.
#1 Use vector assets
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.
#2 Ensure your CSS has adequate browser support
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.
Here is an example:
:fullscreen a {
display: flex
}
This would be converted to the following using Auto Prefixer:
:-webkit-full-screen a {
display: -webkit-box;
display: flex
}
:-moz-full-screen a {
display: flex
}
:-ms-fullscreen a {
display: -ms-flexbox;
display: flex
}
:fullscreen a {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
It prevents your code from becoming excessively long and complex, while applying the latest relevant prefixes based on current browser popularity and property support.
#3 Use CSS comments plentifully
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.
Here is an example:
body {
zoom: 1; /* for IE6 and IE7 */
}
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.
Here is an example:
/******** HEADER ********/
header {
height: 200px;
}
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.
#4 Use a CSS preprocessor such as Sass
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.
As described by Sass themselves:
“CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.”
In short, Sass allows you to use less code, and edit your code far more quickly and easily. It contains some incredibly useful features such as Nesting, which allows you to do this:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
And Extend, which allows you to do this:
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
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.
#5 Use a framework or grid template
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!
This article was originally published on the Envato Blog.
