Front End Legos

by Shay Howe at HTML5 Texas Conference in Austin, TX (Deck)

There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.

In this session, Shay will cover some best practices and performance tips for writing the highest quality HTML and CSS possible. Writing code is the easy part, finding a practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice.

Common Problems

Websites have difficulty scaling
code becomes brittle
Files and code bases begin to swell

What’s Wrong

Best practices aren’t exactly best practices

avoid extra elements
avoid classes
leverage type selectors
leverage descendent selectors

We code so specifically (leveraging selectors) that we can’t make the changes we were trying to code for

Specificity?

Specificity determines which styles are applied

Maintainability

Code must be…

organized
modular
performant

Organization

Approach

stop thinking about pages

Base

Core styles for entire site
Normalize (reset), default elements, grid, variables

Components

User interface concepts & design patterns
Alerts, buttons, forms, lists

Modules

Business logic
Aside, Header, Footer

Your goal over time should be to not write css and just write HTML and see how the styles are automatically applied.

Looking at rdio site for modularity

Modularity

We put a lot of effort into our properties and values, but not so much on our selectors.

use a grid
separate presentation (or theme) from layout

code for reusable elements

Accommodate Content

remove the container element selectors
Use selectors instead of elements

Great ideas on using classes to really separate content from layout

Watch Specificity

be explicit
keep specificity low
Never use IDs or !important
avoid nested selectors (minimize)

measuring Specificity

Formula

count IDs, Classes/Pseudo-classes/attributes, Elements

High Specificity (bad)

Low Specificity (good)

Use Classes

write understandable class names
avoid unnecessary nesting
use same strength specificity

Methodologies

OOCSS

Object-Oriented CSS (Nicole Sullivan – oocss.org)

SMACSS

Scalable and Modular Architecture for CSS (Jonathan Snook – smacss.com)

Reuse Code

Do not duplicate code
remove old code
defer loading subsequent styles

Minimize Requests

combine lide files
use image sprites (use caution)
use data URIs (difficult to edit)

Compress & Cache Files

utilize gzip compression
losslessly compress images
cache common files

HTML5 Boilerplate includes compression and caching

Getting Started

Build a styleguide (Twitter Bootstrap, Zurb Foundation)
Review Methodologies (OOCSS, SMACSS)
Test your code (CSS Lint, Inspector, PageSpeed)

Here's what I think about Best Practices, Technology Internet, HTML, entire site, Maintainability Code, specificity Methodologies OOCSS, extra elements

What people are looking for when they find this page: Jonathan Jeter, oocss, oocss tipps, performance google chrome -youtube -networking, smacss