- The layout of a web page is better controlled
- Style (CSS) kept separate from structure (HTML), means smaller file size
- Reduced file size means reduced bandwidth, which means faster loading time
CSS Validator and Cross-Browser CompatibilityI mention these first because the two most important things for a CSS designer to worry about are having correct syntax and making sure a website displays properly across many different browsers, including older versions of those browsers. Validators are essentially CSS editors that check code for grammatical errors. Cross-browser compatibility tools allow CSS designers a way to test website appearance over different browsers and helps to save time by not having to test different browsers manually one by one. Even though I mentioned earlier that most modern browsers do support the newer CSS3 standards, many users out there still navigate the web using older versions of browsers such as Internet Explorer 9 or previous versions. Equally important is the capability of cross-browser compatibility tools to allow CSS designers the ability to see how web pages will appear on mobile devices. This is particularly important since mobile web traffic surpassed desktop traffic in 2016, a trend that industry experts have been watching for several years now (smartinsights.com).
CSS CompressorsAnother way to increase bandwidth is to decrease the size of a CSS file with compressor tools. CSS compressors eliminate blank spaces, indentations, and even comments to boost performance. Another best practice for CSS designers is to combine separate CSS files into one file for multiple webpages to reduce the amount of HTTP requests (cleancss.com).
Vendor Prefixes and Post ProcessorsPrefixes are used by browsers to render specific style elements that are coded by the CSS designer. When there is a style element that is not fully supported by a browser, vendor prefixes are added manually in the CSS code, forcing the browser to display that style element. Of course, different browsers will display that particular style element in a different manner. For those users out there who are running older versions of browsers, it is still necessary to add vendor prefixes. Remembering to manually enter each of the vendor prefixes that are specific to all the different browsers out there can be difficult for software vendors to remember. That’s where a CSS post processor like Autoprefixer comes in handy. Autoprefixer automatically adds all the required vendor prefixes to the CSS code, and also acts as a CSS editor by comparing the code against a database for proper syntax.
CSS ResetAll browsers have their own proprietary default style. So, if no CSS rules are used on a webpage, the browser will determine how fonts, padding, and margins appear. By using CSS resets, a developer can override a browser’s style sheet by setting things like margins and paddings to “zero” and allowing the developer to use her or his own specifications. Some experts argue against the use of CSS resets because they believe that cross-browser inconsistencies can be dealt with by using well-crafted cascading style sheets. The concern is that if certain elements are set to zero, the developer must redefine them later. This could potentially lead to larger CSS file sizes and result in slower loading times. Also, if default behavior for a certain element is removed by CSS resets, there could be issues with the webpage if those elements are not restyled later by the developer (sixrevisions.com). In my opinion, there is no right or wrong way concerning the use of CSS resets despite the differing schools of thought on the matter. The thing to remember is if a CSS designer wishes to set margins, padding, and fonts to the manner that they want displayed, then by all means, use CSS resets. However, if you don’t mind minor differences in the appearance of elements across multiple browsers, CSS resets aren’t necessary.
Things to AvoidHere are some things to avoid when working with CSS:
- Naming an ID or class based on its property. Try to use names that are based on an element’s use instead of its physical attribute. For example, an element’s color can be changed later when editing the style sheet.
- Not using comments with different portions of the CSS. This contradicts what I mentioned earlier with CSS compressors, but having comments to go along with your code will help tremendously when making revisions months or even years later. A best practice is to include comments where there could be questions about why a section was coded a certain way.