SCALING CSS (FOR LARGE WEB SITES)

Tips, best practices and recommended methodologies for organizing and managing CSS for large web sites.

PART I.

KEYS TO MANAGING CSSGeneral tips for managing and organizing your code

“Font sizes, like colour palettes, should be limited, preset and non-arbitrary.”

—Harry Robertshttp://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/

Standardize your visual designs

• Design modular reusable components vs. pages.

• Clearly define what elements are and usage.

• If two designs are very similar, pick one.• 2 slightly different shades of

gray => Pick one.• 2 font sizes with one pixel

difference => Pick one.

“Whether it is a house or a web site, the latest techniques and trends require a solid understanding of fundamentals.”

—Emily Lewishttps://the-pastry-box-project.net/emily-lewis/2012-january-27

Use “POSH” (Plain Old Semantic HTML)

Use appropriate simple semantic HTML tags.

Examples:• Map typography to tags:

Headers = h1 – h6Body text = p, etc.“Legalese” = small

• Form:fieldset, legend, label, input, textarea, select

• Table (data only):caption, thead, tbody, th, td

• HTML5: header, footer, nav, aside, etc.

<header class="page-header"> <h1>About Us</h1></header>

<div class="page-body"> <nav class="secondary-nav"> <ul class="nav-list"> <li>Welcome</li> <li>Contact</li> <li>Location Map</li> </ul> </nav>

<div class="main-body-content"> <h2>Welcome Subheading</h2> <p>This is some info about us.</p> </div></div>

<footer class="page-footer”> <p><small>copyright 2014</small></p></footer>

POSH: What is “semantic” HTML?

Semantic tags include meaning about the type of content.

Examples: p, h1 – h6, ul, ol, header, nav, etc.

Non-semantic tags include little to no meaning.

Examples: div, span

Benefits of semantic tags:

Improves accessibility and (potentially) SEO. Also makes html code easier to scan and comprehend and has benefits for styling.

POSH:choosing semantic html5 tags

How to choose:

http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

The Secret of Maintainability

Keep it simple.

— Jens O. Meierthttp://meiert.com/

Eliminate unnecessary CSS styles

Make use of browser default styles and css inheritance.

• strong and h1 – h6 tags are bold by default(If you must define these in your css, your reset is too aggressive.)

• Most elements inherit font styles set on “body”.(Except a few form elements)

• Inline elements such as “a” use the line-height of parent.• Don’t add styles you will have to override everywhere.

Example: body {line-height: 1;}(Most text needs leading for legibility so may not be a good idea.)

Eliminate unnecessary CSS…

Don’t make design pixel-perfect to PSD mock.

• PSD margins can be off. (Use standardized defaults.)

• Fonts render differently in Photoshop than in browser.

• Browser default line-height is often good enough.(Only specify in CSS if it’s a vital part of the design.)

(CSS Dev Conf: “Design the Code, Not Pixel-Perfect Comps”

Talk Summary: http://bit.ly/1tiSr5Y

Slides: https://speakerdeck.com/katiekovalcin/design-the-code )

Eliminate unnecessary CSS…Search for instances of CSS repetition and delete.

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: #6f6f6f; font-size: 60%; // already defined line-height: 0; // uses parent’s}small { font-size: 60%; line-height: inherit; // default}

/* Change to => */h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: #6f6f6f;}small {font-size: 60%;}

Eliminate unnecessary CSS…

Simple way to find repetitious styles:

• In Chrome: Use Developer Tools to inspect elements and see all applied styles.

• In Firefox: Install Firebug plugin to inspect elements. (Firebug also lets you edit html code and see the updates on the fly.)

“Write your sass/less so that the output is exactly how you would have written your CSS without it.”

— Chris Coylerhttp://css-tricks.com/musings-on-preprocessing/

Make effective use of Sass

Optimize for output CSS.

• Don’t over-nest selectors.“The Inception Rule” – Don’t go more than 4 levels deep

(Limiting nesting also helps make css modular & reusable)

http://thesassway.com/beginner/the-inception-rule

// BAD:body { .page-wrapper { .page-header { nav { ul { li { a {color: #000;} } } } } }}

// MUCH BETTER:.page-wrapper {...}.page-header {...}

// can add a new class name for nav:.page-nav { ul {...} li {...} a {...}}

Effective Sass: optimize output CSS

• Use @extend & placeholder to share styles.

• Don’t overuse mixins. (duplicates output CSS)

// Sass Placeholder:%notice {...}

.general-notice {@extend %notice;background: gray;

}

.success-notice {@extend %notice;background: green;

}

.error-notice {@extend %notice;background: red;

}

// Output CSS:.general-notice, .success-notice, .error-notice {...}

.general-notice {background: gray;}

.success-notice {background: green;}

.error-notice {background: red;}

Make effective use of Sass

Use Sass partials to separate and organize CSS.http://thesassway.com/beginner/how-to-structure-a-sass-project

Separate styles into partials then include into one output css file.

• Reduce http requests which slow rendering of pages.• Helps in modularity and locating specific styles.• Share CSS files to build template or page specific style sheets.

(Include shared standardized styles plus separate more specific styles)

PART II.

TOOLS & METHODOLOGIESMethodologies to help manage designs and css code

Atomic Design http://bradfrostweb.com

/blog/post/atomic-web-design/

Conceptual methodology for creating modular design systems. (Promotes consistency and scalability)

Break design into 5 levels:1. Atoms2. Molecules3. Organisms4. Templates5. Pages

Atomic Design: 1) Atoms

Fundamental building blocks:

Abstract: • design aesthetic

(“Super flat”, “Subtle skeuomorphism”)

• color palettes• fonts

Concrete elements:(individual HTML tags)• form label• input• button• h1 – h6, etc.

Atomic Design: 2) Molecules

Molecules = Atoms combined into smallest fundamental units

Example:Combine a form label, input and button to create a compact form such as a search form.

Atomic Design: 3) Organisms

Groups of molecules joined to make more complex interface sections.

Examples:• A “masthead” consisting of logo, navigation and search form

• “product grid” repeating a “product item” in a list

Atomic Design: 4) Templates

Groups organisms together in a layout.(underlying wireframe layouts for different page types)

Example Types: • signup funnel pages• main content pages• product detail pages• company blog pages

Atomic Design: 5) Page

Individual pages combining a template with actual content.

SMACSS (Scalable and Modular Architecture for CSS)

https://smacss.com

A system for categorizing and breaking up CSS rules to aid in building reusable patterns. (works well with Atomic Design principles)

Main Categories:

1. Base: defaults (base styles for html tags) - atoms

2. Module: reusable modular components – molecules & organisms

3. Layout: page structure: grids, columns - template

SMACSS: organize CSS files

Use SMACSS together with Sass to organize file structure.

OOCSS (“Object-Oriented” CSS) www.stubbornella.org

“…repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS… object can then be reused throughout a site.”

Media Object (classic example)• Image to left, text to right.• FB cut average CSS bytes per page by 19% with OOCSS

http://www.slideshare.net/stubbornella/5-mistakes-of-massive-csshttp://www.stubbornella.org/content/2010/06/21/css-granularity-architecture/

OOCSS: Potential Drawbacks

• Encourages many css classes per html element

• Overuse of non-semantic classes• Example: multiple classes used to add padding, margin, border,

layout, “skin”, etc.

• Changing visual styles requires editing lots of HTML

OOCSS: The Solution = OOCSS + Sass

“Besides the unmaintainable HTML, everything else about OOCSS is spot on. Abstracting repetition into modules is the only way to keep CSS maintainable on large projects. So how do we get the benefits without the drawbacks?”http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/

• Use Sass together with OOCSS principles = “modular CSS without bloated, hard-to-maintain HTML”

• Use Sass @extend and placeholder to share styles without adding as separate classes in HTML.

.post {@extend %media-object; @extend %fancy-border …}

.comment {@extend %media-object; @extend %lt-blue-bg …}

In Summary

Key Points:

1. Define and reuse patterns in both designs and code.(Avoid “one-offs”.)

2. Understand and use features of coding languages: HTML, CSS, Sass

A final important fact:

Internet Explorer 6 – 9* have a CSS selector limit of 4,095.(Selector styles after the limit are ignored.)

*Limit raised to 65,534 in IE10