Download as PDF, PPTX
BEM and Component Development
- 1. © Copyright 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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 2017Tesla, 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