As mentioned before in a previous post, CSS (Cascading Style Sheets) is a web design tool used to control the layout of a webpage while HTML deals with the actual content. There are different versions of CSS including the kind that is found in the actual HTML code itself, but that defeats the purpose of using CSS in the first place. For better performance and easier maintenance, a separate CSS file is preferred over embedded CSS. If font, text size, or changes in the appearance of any element are to be made later, simply accessing a separate CSS file is much easier than having to go through extensive lines of code in an HTML file. CSS has gone through several changes over the years, and the latest version is CSS3. As we approach the end of 2016, most web browsers likely support the CSS3 standard. With this latest version, CSS designers have more tools at their disposal. The advantages of using a separate CSS file rather than embedding the CSS code inside the HTML file include:

• 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

There are far too many tools that are useful for CSS designers to list here, but I’ll describe a few along with best practices and some things to avoid as well.

CSS Validator and Cross-Browser Compatibility

I 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 Compressors

Another 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 Processors

Prefixes 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 Reset

All 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 Avoid

Here 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.

Conclusion

CSS is a powerful tool as long as you know certain tips, best practices, and avoid problematic issues. With CSS, you can adjust the layout of a webpage without having to define the appearance for every single element, table, or block of text in the HTML file itself. A style is defined only once in a CSS file and can be used for multiple webpages, making life significantly easier for developers. What comments or questions do you have about the use of CSS?

References

“Digital Marketing Trends for 2017”. Smartinsights.com. 26 October 2016. Web. “CSS Minifier”. Cleancss.com. 16 December 2016. Web. “Should You Reset Your CSS?”. Sixrevisions.com. 19 December 2016. Web.

ABOUT CATMEDIA:

CATMEDIA is an award-winning Inc. 500 company based in Atlanta, Georgia. Founded in 1997, the company specializes in advertising, creative services, media production, program management, training, and human resource management. As a Women Owned Small Business (WOSB), CATMEDIA provides world-class customer service and innovative solutions to government and commercial clients. Current CATMEDIA clients include Centers for Disease Control and Prevention (CDC), Federal Aviation Administration (FAA), Office of Personnel Management (OPM), and the Department of Veterans Affairs (VA).

Stay Connected with CATMEDIA: For more information, please visit CATMEDIA.com Like us on Facebook  Follow us on Twitter