Scalable and Modular Architecture for CSS
The SMACSS Workshop is a full day of instruction and exercises on writing HTML and CSS using a flexible and modular approach that will improve team efficiency and minimize problems with growing projects.
This workshop will shift how you think about writing CSS that will simplify your code, make your project easier to manage, and allow it to grow without creating an increasingly brittle system of dependencies. Your code will also be more portable, making it easier to use code on other projects.
Is this workshop for you?
Have you ever added !important or added an extra selector just to get something to style properly? Have you found yourself adding more properties to override properties you already set elsewhere in your CSS? Does inspecting an element in Firebug or Web Inspector reveal a long stream of styles being applied, overridden, and reapplied? Then this workshop is for you.
Do you work on larger projects? Do you work with larger teams? Then this workshop is for you.
You need not have played with the latest and greatest CSS3 and know what a vendor prefix is. You will need to know a selector from a property and have a general understanding of CSS-based layouts.
What is in the workshop
The SMACSS Workshop is SIX HOURS of presentation, discussion, and exercises on creating scalable and modular web sites and web applications.
Categorization
In the first segment, we look at what it means to categorize our CSS and why it is valuable to separate the CSS we write into categories.
- Learn the Five Categories: Base, Layout, Module, State, and Theme
- Explore how to separate theming and typography
- See how small sites differ from large (and why SMACSS can work for both)
Naming Convention
- Learn how to name CSS classes and why naming convention is important
- See why naming things is hard and approaches to better naming convention
- Understand the problems that naming convention is trying to solve
Base Styles
- Discover the pitfalls of setting base styles
- Learn when to create a module instead of base styles
Depth of Applicability
- Learn what Depth of Applicability means and how it impacts our code
- Work through examples of how to simplify complex selectors
- Look at how to create leaner and more flexible modules
State-based Design
- See how I look at applying states to a modular design
- Learn the 4 ways to apply states to a module
Preprocessors
- Look at what a preprocessor can do for you
- Discover how preprocessors can create unwanted, bloated code and learn how to fix it
- Learn how to tie a preprocessor into a SMACSS-based project
Prototyping and Pattern Libraries
- Learn how to use templates to create reusable modules
- Look at how module isolation can improve testing
- Learn what a pattern library is and how to create one for your project
Converting a Project
- Look at ways to audit your existing code base
- Develop strategies for converting a project
- Learn how to structure your project
Do you need any hard- or software?
You should bring a laptop with your preferred (text) editor to get the most out of this workshop.
When and where is the workshop taking place?
On Monday, November 6th, from 10am (10:00) to 5pm (17:00) at Neue Mälzerei, Friedenstraße 91, 10249 Berlin
