Discussion on benefits of using BEM for CSS

[fofr]

Following on from this PR and discussion: https://github.com/alphagov/govuk-lint/pull/65, we've created this issue to discuss what benefits BEM can give us. It is somewhere permanent and public, for future reference.

BEM: "Block Element Modifier": An introduction to BEM

Please consider these perspectives:

• Using BEM for new projects
• Switching to BEM for existing projects
• How to use BEM well, and the risks of using BEM poorly
• Using BEM in wider government
• How BEM is understood by non-frontend developers

If we believe using BEM is a good idea, we should consider what the first steps towards using BEM would be.

The discussion about using BEM on GOV.UK Publishing has come up a few times in the past. In those discussions the FE teams at the time decided against BEM, primarily on the grounds that it was better to have consistency within the GOV.UK Publishing projects - but also some stylistic grounds. Unfortunately I don't think we recorded notes from the discussion.

I think it'd be worth having that discussion again, in constructive way. The GOV.UK Publishing FE team has changed quite a bit since the last time and documenting the outcome, whatever it is, will be useful for the future.

[fofr]

We have begun using BEM for component CSS. See https://github.com/alphagov/govuk-lint/pull/79

[tuzz]

Having used BEM when writing components, I'd definitely recommend rolling this approach out across GOV.UK. It makes it much easier to reason about the context a CSS rule applies to and to find corresponding CSS rules for a DOM element.

[dankmitchell]

I’m in favour of BEM. The govuk-frontend approach is 👌

[ChrisBAshton]

This repo has now been archived. Styleguide discussions can be moved to https://github.com/alphagov/gds-way.

I'd be interested to see the BEM discussion continue!