How we can use the ideas behind the BEM naming strategy to help us build components for our web applications

1. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure.
Eric Bishard
Twitter:
LinkedIn: linkedin.com/in/
Front End UI/Component Developer, UX Student for life
1

2. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure.
BEM Methodology:
HTML/CSS
What we’ll Cover:
• What is BEM
• Let’s break BEM down
• How to apply BEM
• Component composition
• Naming strategy
• Benefits of using BEM
Agenda

3. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 3
What is BEM?
CSS naming methodology
• Works well for large scale / complex projects
• Well organized and self documenting
• Classes can be lengthy, but they provide rich info on intent
• Manages (reduction of) specificity
• Strict implementation rules (prevents use outside block)
• (if rules are enforced by prefixing parent class)
• BEM is just a naming convention that works well w/ components

4. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 4
Block
Meaningful standalone entity

5. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 5
Element
No standalone meaning outside of a block

6. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 6
Modifier
A flag that changes appearance/properties

7. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 7
What are the benefits?
Modularity, Reusability and Structure
• Block styles are independent
• Cut off the cascade effects from other CSS
• Reusable and easily transferable blocks
• Reduces HTML and CSS reuse
• Help in building component libraries
• Gives your CSS a solid naming scheme
• Easy to write and read

8. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 8
What About Nesting?
Using SCSS with BEM to Nest Elements
• Provides tangible benefits
• Has downsides, but we can deal with these
• Helps manage specificity (flat specificity graphs)

9. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 9
Let’s Build Something
And test out how we would use BEM
On the next slide we will see a mockup of the component we want to
build, the rest of the presentation was focused on live coding

10. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 10

11. © Copyright 2017 Tesla, Inc. All rights reserved. Proprietary and confidential business information subject to and disclosed under applicable Non-disclosure Agreement and/or exempt from FOIA disclosure. 11
Links for this talk:
Eric’s Public Repos
Redacted for slide share
BEM Introduction
GetBEM.com/introduction/
Resources
CSS Preprocessor Performance, CSS, BEM Syntax Basics,
Nesting Your BEM, The Specificity Graph