Scalable Stylesheets - Theming with Modular CSS

Popular CSS architecture strategies such as OOCSS and SMACSS are geared toward writing CSS that can scale with large, complex sites. Both revolve around one core concept-- style by layering classes to get the effect you want. This results in tidy, ready to scale, easy to maintain stylesheets. A front-end that scales with Drupal’s back-end.

However, Drupal’s theming layer invites bad front-end development practices by encouraging developers to write poorly constructed CSS selectors that are a nightmare to maintain. We end up working with classes that are provided by core and base themes-- writing junk selectors like #sidebar-first .block .item-list ul li { ... } when .vertical-tab { … } will do. Why? Because it’s hard to add classes where you want them. Hard, not impossible and I’m going to show you how to do it.

In this session, we’ll get waist deep in code. We’ll cover the tools you need to take control of your classes: template files, theme functions, preprocess functions and alter functions. We’ll dive into the techniques laid out in Adding CSS Classes to Drupal Blocks, extending them to other important elements such as nodes, menus and fields-- in a consistent, predictable way. Freeing you to take advantage of the exciting advancements in CSS Architecture.

This session is for front-end devs who: prefer to theme from scratch; take comfort in their text-editor and feel dirty when defining CSS classes in the database.