SASS

Block Element Modifier

Ben Wasilewski

• benwas.com

• Hello, My name is Ben
• I've been building websites for over 10 years
• Freelancer

Beefin' with Bootstrap

    <button class="btn btn-primary btn-sm btn-do-something">Do Something</button>

• Bootstrap implements OOCSS
• OOCSS markup makes me sad

B.E.M.

• There is a better way!

Block, Element, Modifier

created by Yandex in 2012

• BEM Stands for Block, Element, Modifier
• Created in 2012 by Yandex

Naming Convention

Development Methodology

• BEM is a development methodology
• Implements a powerful and flexible naming convention

Modularize CSS

Communicate to other developers the purpose of a module

• Aims to modularize CSS (OOP)
• Communicate code's purpose to other developers
• Code is read much more often than it is written - make it easy to understand!

• Website broken down into blocks:
• Navigation
• Search
• Logo
• Login
• Body/Content
• Footer

The Syntax

/* Search Block */
.search { }

/* Search Element */
.search__field { }

/* Search Block Modifier */
.search--primary { }

• Blocks are named with descriptive words
• Elements and modifiers are defined with their parent block name as a prefix
• Underscores for elements
• Hyphens for modifiers
• Why the double hyphen/underscore?
• Allows for hyphenated names
• site-search
• ex-wife

Blocks

/* Search Block */
.search { }

• Independent entities that serve a purpose
• Building block of an application

Elements

/* Search Elements */
.search__field { }
.search__button { }

• Part of a block that performs a specfic function
• Contextual in nature
• Elements only make sense in the context of the block that they belong to

Modifiers

Theme

/* Search Block Modifier */
.search--secondary { }

• Modified version of a block
• Modifies the theme

State

/* Navigation Item Modifier */
.nav__item--active { }

• Modified version of a block
• Modifies the state

Location

• Modified version of a block
• Modifies the location

Placeholder Selectors

Sass selectors that only compile if extended.

Inherit styles from a "silent" selector. Override as necessary.

%nav {
    display: block;
    position: absolute;
}

.nav--primary,
.nav--secondary {
    @extend %nav;
}

// override the inherited style
.nav--secondary {
    display: inline-block;
}

• Disclaimer: this is only MY approach - there are others
• Use placeholder ("silent") selectors
• Not compiled unless extended by another selector

Learn More

Download or view this presentation http://bwasilewski.github.io/SassBEM/

http://github.com/bwasilewski/SassBEM/ Read more about Sass, BEM, and Placeholder Selectors MindBEMding: Getting Your Head Around BEM Syntax

OOCSS Plus Sass is The Best Way to CSS

Extending Silent Classes in Sass

• This presentation can be found on Github
• Read more about placeholder selectors and BEM methodology
• Thanks!