Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improve your Workflow with Modular Sass

Improve your Workflow with Modular Sass

There are a number of methodologies floating around that help improve how we write and maintain our CSS: SMACSS, BEM, or Object-Oriented CSS. In this session, you’ll get a better understanding of Sass and modular based design principles and how we can use them to create flexible, modular and responsive CSS.

In this session we’ll:

• contrast SMACSS, OOCSS, & BEM concepts
• discuss practical information about how to structure your Sass
• look at a handful of modular examples
• wield the power of Sass to it’s fullest and love it
• not be dogmatic about preferred methodologies ‘cause we really just want to enjoy writing Sass

Bermon Painter

April 04, 2015
Tweet

More Decks by Bermon Painter

Other Decks in Programming

Transcript

  1. OOCSS Example | CSS .accordion {} .accordion .title {} .accordion

    .content {} .box-border {} .separator-border {}
  2. SMACSS Example | HTML <dl class=“accordion”> <dt class=“accordion-title is-active”> Title

    </dt> <dd class=“accordion-content is-active”> … </dd> </dl>
  3. SMACSS Example | CSS .accordion {} .accordion-title {} .accordion-title.is-active {}

    .accordion-content {} .accordion-content.is-active {}
  4. BEM Example | HTML <dl class=“accordion”> <dt class=“accordion__title accordion––active”> Title

    </dt> <dd class=“accordion__content accordion––active”> … </dd> </dl>
  5. Bermon Example | HTML <dl class=“accordion”> <dt class=“accordion-title” data-state=“open”> Title

    </dt> <dd class=“accordion-content” data-state=“open”> … </dd> </dl>
  6. Bermon Example | ACCESSIBLE HTML <dl class=“accordion” role=“tablist”> <dt id=“tab-1”

    class=“accordion-title” role=“tab” aria-selected=“true” aria-expanded=“true” aria-controls=“panel-1”> Title </dt> <dd id=“panel-1” class=“accordion-content” role=“tabpanel” aria-hidden=“false” aria-labeled-by=“tab-1” > … </dd> </dl>
  7. Bermon Example | SCSS .accordion { … &-title { &[aria-selected=“true”]

    {} &[aria-selected=“false”] {} &[aria-expanded=“true”] {} &[aria-expanded=“false”] {} } &-item { &[aria-selected=“true”] {} &[aria-selected=“false”] {} } }