owc4: Getting Your CSS Under Control

Slides for this event will be at openwebcamp.org/slides

One person developer is not same as multiple person team working on CSS file. (heh) At Yahoo, he used to work on team of five prototypers, multiple projects.

CSS “is easy.” Selector, properties, then OMG display slide is complicated.

Four considerations for today’s talk: categorization, naming convention, decoupling HTML from CSS, and increasing semantics.Categorization: base, layout, module, state, theme. First four will be on every project.

Base: CSS reset (html, body, h1, h2…) – is adding code only to take it away. Other code may effect look and feel that you want.

Layout: header, sidebar, content.

Modules: objects, 90% of the CSS code are modules: customized list, buttons. For example, .tag .listview, little repeating chunks of code. Sub-modules: visual style for something, sub-modules are the variations of that. Examples: different colors, sizes.

States: things that change in the course of the web page, like active vs default state tabs.

Themes: not used on every project. specialized headers, template borders or backgrounds. Increased font size for specific locales (e.g., Asian fonts). Design is about hierarchy.

Naming convention: clarifies intent. Use class over ID (specificity is dangerous).

  • .grid {}
  • .tab and .is-tab-active {}
  • .listview {}
  • .is-hidden {}
  • .btn and .btn-large and .btn-small {}
  • .theme-border and .theme-background {}
  • text-plus1 or text-minus1 {}

Decoupling HTML and CSS: example in nav display or menus. This is about shifting your thinking from coding a page (variations: home, inside). Code for the system, a visual style.

Have your CSS do one thing. State-based design: layout or module styles, javascript-driven states, pseudo-class and media query states. CSS Panic game: all done in CSS. The alligators are checkboxes. Forms: input boxes (if other box is checked, display:block; modifies earlier display:none; )

Summary: categorization, naming convention, decoupling HTML & CSS, and Increased semantics. His book: Scalable and Modular Architecture for CSS.

TwitterFacebookGoogle+PinterestShare