BEM

CSS naming convention

It stands for BLOCK __ ELEMENT -- MODIFIER

It’s a naming convention to help us write a better and more structured CSS

“BEM is  far more strict and informative, which makes it  ideal for teams of developers on larger projects that might last a while”

BEM

BLOCK: independent high level element represented by a class

ELEMENT: a direct descendent of the block identified by "__element"

MODIFIER: an element's modified state identified by "-- modifier"

BEM

In my opinion it works well for components only.

You would use BEM to style your component and then use regular CSS to control layout and positioning of your components.

The component will be intact (in terms of styling) regardless of where it is sitting (this could be achieved with normal CSS however BEM aims to improve CSS readability)

BEM

.filter {} /* Block */

.filter__category {} /* Element */

.filter__category--open {} /* Modifier */

BEM

REGULAR CSS

.person {}

.hand {}

.female {}

.female-hand {}

.left-hand {}

BEM

BEM

.person {}

.person__hand {}

.person--female {}

.person--female__hand {}

.person__hand--left {}

Not all of the CSS will be BEMable, there are cases where you will use a regular CSS class/classes.

One of the hardest parts of BEM is deciding when to start and stop scope, and when (or not) to use it. It’s a case of ‘you’ll just know when you know’.

BEM

Why currently it doesn't work?

We have a huge CSS dependency problem on our sites

http://mandscareers.stage.aiareview.co.uk/why-work-here

https://emploi.burgerking.fr/?utm_source=burgerking.fr&utm_medium=referral

http://ihg.int.aiareview.co.uk/Thailand

https://jobs.greeneking.co.uk/

BEM

Solution

Styling should be dealt with the component itself

Layout/position should be left to the page/grid system

http://codepen.io/AlexanderWeb00/pen/bqwBaN?editors=0100

BEM

Development process

1) take a look at the designs and build your mark up

2) apply your BEM styled components (by now you will have a messy layout but a full styled page)

3) finesse positioning/layout as defined by design (grid, float, absolute)

4) show folder-structure PDF

BEM

I will experiment this approach on the HSBC site and share the outcome with you

Questions?

Concerns?

Issues?

Ideas?

BEM