Tweet
Tweet

Slide 1

Slide 1 text

BEM Easy. Modular. Flexible.

Slide 2

Slide 2 text

What comes to your mind when you think of CSS?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

And CSS in a big project?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Why?

Slide 7

Slide 7 text

Why do we have a low bar in terms of CSS code quality?

Slide 8

Slide 8 text

Web History ● Everything was designed to share documents ● CSS had a different intention ● Web apps became a thing

Slide 9

Slide 9 text

Several problems

Slide 10

Slide 10 text

Inline CSS Code duplication Browser incompatibility

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Goals ● Reuse code ● Organization ● Standardization ● Modularization ● Simplicity

Slide 13

Slide 13 text

BEM Block__Element--Modifier

Slide 14

Slide 14 text

Block Standalone entity that is meaningful on its own.

Slide 15

Slide 15 text

Block Naming Block names may consist of Latin letters, digits, and dashes

Slide 16

Slide 16 text

Element A part of a block that has no standalone meaning and is semantically tied to its block

Slide 17

Slide 17 text

Element An element CSS class is formed as block name plus two underscores plus element name

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Element An element CSS class is formed as block name plus two underscores plus element name

Slide 20

Slide 20 text

Element An element CSS class is formed as block name plus two underscores plus element name

Slide 21

Slide 21 text

Modifier A flag on a block or element. Use them to change appearance or behavior.

Slide 22

Slide 22 text

Modifier Naming A modifier CSS class is formed as block’s or element’s name plus two dashes

Slide 23

Slide 23 text

Modifier HTML Remember that modifiers only carry modifications!

Slide 24

Slide 24 text

Rule of thumb Use meaningful names

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Benefits

Slide 27

Slide 27 text

Modularity ● Block styles are independent. No cascading problems. ● You also get the ability to transfer blocks from your finished projects to new ones.

Slide 28

Slide 28 text

Reusability ● Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain. ● You can build a library of blocks.

Slide 29

Slide 29 text

Structure ● BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.

Slide 30

Slide 30 text

Easy ● Only three core elements ● No 3rd-party library needed ● You can start applying it now

Slide 31

Slide 31 text

That’s it Feel free to ask any question

Slide 32

Slide 32 text

That was just the basics... ● https://en.bem.info/methodology/quick -start/ ● http://getbem.com/introduction/