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 CSS General tips for managing and organizing your code

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

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 Lewis

Use “POSH” (Plain Old Semantic HTML) Use appropriate simple semantic HTML tags. Examples: Map typography to tags: Headers = h1 – h6 Body 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. About Us Welcome Contact Location Map Welcome Subheading This is some info about us. copyright 2014

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: om/downloads/h5d -sectioning- flowchart.png om/downloads/h5d -sectioning- flowchart.png

The Secret of Maintainability Keep it simple. — Jens O. Meiert

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: Slides: )

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 Coyler

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) inception-rule 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 & placeholder to share styles. Don’t overuse mixins. (duplicates output CSS) // Sass Placeholder: %notice {...}.general-notice %notice; background: gray; }.success-notice %notice; background: green; }.error-notice %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. 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 & METHODOLOGIES Methodologies to help manage designs and css code

Atomic Design Conceptual methodology for creating modular design systems. (Promotes consistency and scalability) Break design into 5 levels: 1. Atoms 2. Molecules 3. Organisms 4. Templates 5. 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) 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) “…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

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?” Use Sass together with OOCSS principles = “modular CSS without bloated, hard-to-maintain HTML” Use and placeholder to share styles without adding as separate classes in HTML..post %fancy-border …}.comment %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