CSS, like many other mediums of design, is as much craftsmanship as it is an art, subject to the taste of the designer. That being said, there are a variety of tools that can make the process of writing CSS easier and more efficient — streamlining the process to make a website that is both functional and well-laid out. This post will offer five excellent resources for following CSS best practices to get great results with consistency and reliability.
Chrome Developer Tools
Chrome DevTools is a god-send for web designers and developers alike. In the process of writing CSS, it can often be difficult to keep track of every style that’s being applied to a given element, creating confusion as to why the new CSS rules you’re writing aren’t taking effect. Chrome DevTools makes this process painless, showing you every CSS rule applied to any element on the page, including inheritance from parent elements. Not only that, it allows you to make changes right in the console, making it easy to try out new settings before committing the changes to your actual CSS or HTML files.
Another useful application of DevTools is to inspect and analyze the design of sites that you admire. If you’re ever curious about the styles of popular sites like Twitter or Facebook, you can simply inspect their styles using DevTools.
Built by experienced web designers and developers Adam Morse, Brent Jackson, and John Otander, CSS Stats is an enormously useful tool for analyzing the CSS statistics of any site on the Internet. You can view how many different rules, font sizes, and colors are used, as well as tons of other parameters of a CSS file.
This is great for finding ways to cut down on redundancy and inconsistencies (such as having 10 shades of blue used when you really only need one), an unnecessarily-large amount of different font sizes, font families, or other inefficiencies. It also allows you to compare your site’s CSS statistics with any popular website.
Google Mobile-Friendly Test
With the ubiquity of smartphones and mobile devices, having a site that is mobile-friendly is crucial. Google’s free mobile-friendly test is an easy way to check if your site is properly formatted to be responsive with mobile devices. If your site does not pass this test, Google will display the issues that need to be fixed in order for the site to be mobile-responsive.
An oft-repeated concept in CSS is that every element in an HTML document can be visualized as a box. Referred to as the “box model“, regardless of the displayed shape of any element, when you factor in its margin, padding, and borders, every element will have the dimensions of a box. This is an important concept to understand in dealing with many common layout issues.
Pesticide is a free Chrome plugin that will place a solid border around every element on the page when activated, allowing you to easily see any potentially conflicting layout issues between elements.
One annoying aspect of writing CSS (and any code for that matter) is having to constantly refresh the webpage in order to see the changes. While there are a variety of tools for auto-refreshing the browser (such as BrowserSync and LiveReload), they often require setting up a development environment for each project, which can tedious to do when you just want to quickly experiment.
Improving the User Experience
Good CSS requires a lot of tinkering, analysis, and as much technical skill as an eye for good design. Whether it is optimizing your site for mobile, making site resources more efficient, or cutting down on unnecessary code, there are almost always ways of improving on your existing CSS. The resources listed above are a great toolset for improving the consistency, elegance, and robustness of your CSS, ensuring the best possible experience for all of your users.