CSS Optimization: Tutorial and Course

CSS Optimization: Tutorial and Course - CSS Optimization Tutorial and CSS Optimization Course, The Ultimate Guide to CSS Optimization. Learn CSS Optimization Tutorial and CSS Optimization Course at CSS Optimization Tutorial and Course.

CSS Optimization Tutorial and CSS Optimization Course

CSS Optimization: Overview

CSS Optimization Tutorial and Course - CSS Optimization tutorial and CSS Optimization course, the ultimate guide to CSS Optimization, including facts and information about CSS Optimization. CSS Optimization Tutorial and Course is one of the ultimate created by to help you learn and understand CSS Optimization and the related SEO technologies, as well as facts and information about CSS Optimization.

CSS Optimization: Tutorial and Course - CSS Optimization Tutorial and CSS Optimization Course by , The Ultimate Guide to CSS Optimization.

CSS Optimization: Tutorial and Course

In the past few years, Cascading Style Sheet (CSS) has undergone a transformation. It went from being a dead-simple styling language with limited power, to a complex technology defined by over 80 W3C specifications (including drafts), with its own developer ecosystem, its own conferences, and its own frameworks and tooling.

Up until roughly 2009, CSS expertise was not defined by how well the language was known. This was more or less a given for any serious CSS work. Instead, CSS prowess was defined by the number of browser bugs and workarounds that had been committed to memory. Up until 2015, and browsers are now designed to support standards, there are still some unavoidable incompatibilities, but the pace of change is so fast, most browsers now auto-update.

The challenge in modern CSS has little to do with working around transient browser bugs. The challenge now is using the CSS features we have in a creative way, as well as using CSS optimization techniques, in order to come up with DRY (Don't Repeat Yourself), maintainable, flexible, lightweight, and as much as possible, standards-compliant solutions. CSS optimization also makes it load faster and makes it more search engine-friendly.

In this CSS Optimization Tutorial and Course, you'll learn how to shrink your stylesheets and HTML at the same time. CSS-specific techniques include:

HTML-oriented techniques include replacing JavaScript behavior with CSS, designing markup for descendant selectors, and CSS layout. By combining these techniques, you can reduce HTML and CSS file sizes by up to 50%. When you plan your website in this way, you are giving it what we call CSS architecture.

CSS Optimization: CSS Architecture

Good CSS architecture involves planning from the very beginning for CSS layout, style, and behavior. This way you can avoid most of the limitations and browser quirks that creep into an unorganized CSS layout.

To create a solid CSS architecture, use the following techniques:

The best CSS optimization practice is to use appropriate structural markup so that you can apply the most prevalent CSS rules to those elements. Then you can use classes for exceptions, minimizing the need to litter your markup with classes. This technique optimizes your CSS and markup at the same time.

CSS Optimization: Using A Reset Stylesheet

One solution to overly specific CSS selectors and cross-browser compatibility is to use a reset stylesheet. Reset stylesheets set up a known set of default style rules to equalize browser rendering behavior.

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

This reset stylesheet zeros out margins, padding, borders, and outlines for all type selectors (this is more efficient than the universal selector * because of CPU overhead), as well equalizing font size to 100%, setting vertical-align to baseline to equalize browser differences, and so on.

By resetting visiting browsers to default behavior, you can be more confident in styling your markup and omitting default values. This technique helps to eliminate the majority of browser differences that plague developers when debugging CSS.

CSS Optimization: Replacing Inline Style with Type Selectors

This section starts with simple type selectors to streamline markup, and then it moves through grouping, inheritance, and CSS shorthand, and finally to some applied techniques to replace JavaScript behavior.

Web pages that use inline style pepper HTML code with unnecessary font and style tags. This effectively hardcodes the presentation directly within the HTML. Unless the style is used only once, it is more efficient to create a CSS rule and target all elements of a certain kind with type selectors (i.e., p , ul , h2 , etc.).

Removing the inline styles makes your codes clean, as well as helping search engine optimization (CSS) by boosting keyword density and prominence.

CSS Optimization: Use Descendant Selectors

Descendant selectors (also called contextual selectors) target elements that are contained within other elements using the inherent structure of your markup. Labeling your container cells allows you to target content that is enclosed within elements without the need for inline classes.

  
 
Warning!

The descendant selector in the preceding code (div.warning p) targets the paragraph element that is contained within the

element. Rather than explicitly embedding classes into each element that you want to target, it is more efficient to use a descendant selector to target descendants of elements, labeled or otherwise.

The child selector, > , allows finer-grained targeting and does not target all descendants, just the most immediate children. For unordered lists, the W3C recommends using child selectors to style nested lists, not descendant selectors.

CSS Optimization: Grouping Selectors with Common Declarations

CSS allows you to group multiple selectors that share the same declaration. This CSS optimization technique allows you to apply the same style to multiple selectors, separated by commas, to save space. For example:

 .breadcrumb { font-weight: normal; font-size: 12px; color: inherit; font-family: arial, helvetica, sans-serif; } .nav { font-weight: normal; font-size: 12px; color: inherit; font-family: arial, helvetica, sans-serif; } .copyright { font-weight: normal; font-size: 12px; color: inherit; font-family: arial, helvetica, sans-serif; }

Do this, by grouping multiple selectors with common declarations:

 .breadcrumb, .nav, .copyright { font-weight: normal; font-size: 12px; color: inherit; font-family: arial, helvetica, sans-serif; }

CSS Optimization: Grouping Declarations with Common Selectors

CSS allows you to group multiple declarations that share the same selector into one rule set, separated by semicolons. This technique allows you to apply multiple declarations to one selector to save space.

For example:

 body {font-size: 1em;} body {font-family: arial, helvetica, geneva, sans-serif;} body {color:#000000;} body {background:#ffffff;}

Doing this, by grouping multiple declarations that share the same selector:

 body { font-size: 1em; font-family: arial, helvetica, geneva, sans-serif; color:#000000; background:#ffffff; }

Even better, use shorthand properties to abbreviate this rule even further, like this:

 body{font-size:1em;font-family:arial,helvetica,geneva,sans-serif;color:#000000;background:#ffffff;}

By combining the grouping of selectors that share the same declaration and declarations that share the same selector, you can apply multiple declarations to multiple selectors. This technique allows you to create compact yet powerful CSS rules.

CSS Optimization: Combining Common Styles into Shared Classes

One technique that you can use when optimizing CSS is to merge common declarations into separate classes. Not unlike "orthogonalizing" a database into normal forms by eliminating redundant fields, this technique modularizes CSS. The feature that makes this possible is the ability to assign multiple classes to one element which the aforementioned CSS2 & CSS3-compliant browsers support.

This ability to reference multiple classes gives authors new options when styling their content. For elements that share the same styles you can group these shared styles into one shared class.

CSS Optimization: Using Inheritance to Eliminate Duplicate Declarations

You can use inheritance to flow property values down the document tree and eliminate duplicate declarations. An element inherits the properties of its parent element unless otherwise specified.

The child div and paragraph elements now inherit the same font size and family from the body rule. The idea is to simplify your style to remove redundant declarations. If you see the same terms repeated in your properties or class names, this is usually an area where you can squeeze some more bytes out of your CSS and markup.

CSS Optimization: Using CSS Shorthand

Some CSS properties and colors can be written in longhand or shorthand notation. Longhand CSS explicitly spells out every related property in great detail. Shorthand properties use the shorthand built into CSS for popular properties, including font, border, and margin. Shorthand hex colors abbreviate longhand #rrggbb triplets to #rgb shorthand

CSS Optimization: Abbreviating Long Class and ID Names

Verbosity is a virtue in some programming circles, but not when you craft CSS. Long class names may be more easily understood by subsequent designers, but your users must download those extra bytes (at least the first time they load the CSS file).

Be sure to watch out for namespace collisions when you do this for more complex applications with layered stylesheets.

Abbreviating class and ID names to one or two characters is an extreme technique, and you should use it only after your website design is set in stone. As most sites are not static, reserve this technique only for exceptional situations. SEO University uses this technique, as well as URI rewriting, to squeeze every byte possible out of its home page, because it has the busiest page on the Web.

CSS Optimization: Using Semantically Meaningful Names

Whenever possible, use class and ID names that are semantically meaningful and search-friendly.

CSS Optimization: Comments in CSS

You can manually or automatically remove comments from your CSS files. Another strategy is to use PHP comments in your CSS. Once parsed, these comments will automatically disappear. First, you need to tell your server to parse your CSS files for PHP by adding the following lines to your httpd.conf or .htaccess file.

CSS Optimization: Using CSS2 and CSS3 Techniques

CSS Optimization: Replacing JavaScript Behavior with CSS Techniques

JavaScript is commonly used for rollovers and drop-down menus. However, in many cases you can substitute CSS :hover effects for JavaScript rollovers.

One of the best uses of CSS is to save round trips to the server. As you learned in the , web page latency is dominated by object overhead. You can minimize that overhead by using CSS in creative ways to save HTTP requests by substituting CSS-styled elements and hover effects for images and JavaScript.

CSS Optimization: CSS Buttons

You can simulate graphical buttons with links and CSS and style input elements for forms to make them stand out to improve conversion rates. The speed benefit of using CSS to create buttons is that you save an HTTP request for each unique button. You can achieve this effect by changing the display property of an anchor to block, and setting the width and height as well as styling the background and border of the button.

CSS Optimization: CSS Rollovers

You can easily add a rollover effect by setting the background and text color with the :hover pseudoclass. Many CSS techniques are based on the :hover pseudoclass, including rollovers, dropdown menus including nested menus, and remote rollovers where one hotspot controls another.

CSS Optimization: Mono-Image Menu Rollovers

You can use CSS to create simple rollover effects. But for more complex rollovers the classic method is to use two images for each button: one for the "on" state and one for the "off" state. The problem with this method is that it doubles the necessary HTTP requests and can cause flickering problems when the "off" image is not preloaded. A better way is to combine the on and off state images into one mini sprite and switch the background position on rollover.

CSS Optimization: CSS Sprites

CSS sprites expand this approach to group multiple images into one composite image and display them using CSS background positioning. Some of the busiest sites on the Internet use CSS sprites to improve response times by save numerous HTTP requests for their intricate interfaces.

CSS Optimization: List-Based Menus

For drop-down menus, you can substitute lists for tables and CSS for JavaScript to save a significant amount of HTML markup and JavaScript code.

CSS Optimization: Summary

You should not use CSS optimization in isolation. To fully optimize your CSS, you need to transform your HTML markup. Replace table-based artificial structure and inline redundant styles with standards-based semantic markup using CSS rules that act on similar elements via external stylesheets. You can shrink your CSS by grouping selectors and declarations, using shorthand properties and colors, and by combining common declarations into shared classes. What is even more effective is to transform your markup by using CSS to style lists and layout and replace JavaScript behavior.

By architecting for CSS design from the start with labeled container divs, you can use descendant selectors to target your content, without the need for embedding classes within elements. The new attribute selectors offer more granular control without the need for inline classes for some techniques.

To recap, here are some techniques that you can use to optimize your CSS and HTML pages:

  • Use a reset stylesheet.
  • Plan for descendant selectors by using labeled container cells.
  • Position external CSS files in the head.
  • Replace inline styles with type selectors.
  • Group selectors with common declarations.
  • Group declarations with common selectors.
  • Combine common styles into shared classes where appropriate (assign multiple classes for individual elements).
  • Use inheritance to eliminate duplicate declarations.
  • Use shorthand properties and colors.
  • Abbreviate long class and ID names.
  • Use CSS sprites to save HTTP requests where appropriate.
  • Replace JavaScript behavior with CSS :hover techniques.
  • Use CSS buttons, not graphics.
  • Use list-based menus, not graphics or JavaScript.
  • Use the body ID/class method to highlight and deploy menus for the current page.
  • Use external stylesheets instead of inline styles and style blocks.
  • Use CSS2 and CSS3 techniques.

CSS Optimization: Further Reading

  • How to Design a Website with HTML Examples and Screen Shots: HTML, CSS, JAVASCRIPT & SEO

CSS Optimization: Tutorial and Course - CSS Optimization Tutorial and CSS Optimization Course, The Ultimate Guide to CSS Optimization. Browse CSS Optimization Tutorial and CSS Optimization Course at CSS Optimization Tutorial and Course. Learn CSS Optimization Tutorial and CSS Optimization Course at CSS Optimization Tutorial and Course.