CSS design patterns

CSS design patterns
Nikhil
Published on 2021-07-09 06:15:58

These examples are for documenting CSS-specific design patterns like BEM, OOCSS, and SMACSS.

These examples are NOT for documenting CSS frameworks like Bootstrap or Foundation.

BEM


BEM stands for Blocks, Elements, and Modifiers. It's a methodology initially conceived by Russian tech company Yandex, but which gained quite some traction among American & Western-European web developers as well.

As the same implies, BEM methodology is all about the componentization of your HTML and CSS code into three types of components:

  • Blocks: standalone entities that are meaningful on their own  - Examples are header, container, menu, checkbox & textbox
  • Elements: Part of blocks that have no standalone meaning and are semantically tied to their blocks. Examples  = are menu item, list item, checkbox caption & header title
  • Modifiers: Flags on a block or element, used to change the appearance or behavior Examples  - are disabled, highlighted, checked, fixed, size big & color yellow

The goal of BEM is to keep optimize the readability, maintainability and flexibility of your CSS code. The way to achieve this is to apply the following rules.

  • Block styles are never dependent on other elements on a page
  • Blocks should have a simple, short name and avoid _ or - characters
  • When styling elements, use selectors of format blockname__elementname
  • When styling modifiers, use selectors of format block name--modifier name and blockname__elementname-- modifier name
  • Elements or blocks that have modifiers should inherit everything from the block or element it is modifying except the properties the modifier is supposed to modify

Code example

If you apply BEM to your form elements, your CSS selectors should look something like this:

.form { } // Block
.form--theme-xmas { } // Block + modifier
.form--simple { } // Block + modifier
.form__input { } // Block > element
.form__submit { } // Block > element
.form__submit--disabled { } // Block > element + modifier

The corresponding HTML should look something like this:

<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website