CSS/Sass naming conventions

Introduction

Our guidelines are based on those used in Calypso, which itself follows the BEM methodology.

Refer to the Calypso CSS/Sass Coding Guidelines for full details.

Read more about BEM key concepts.

There are a few differences in WooCommerce which are outlined below.

Prefixing

As a WordPress plugin WooCommerce has to play nicely with WordPress core and other plugins/themes. To minimize conflict potential, all classes should be prefixed with .woocommerce-.

Class names

When naming classes, remember:

• Block - Standalone entity that is meaningful on its own. Such as the name of a component.
• Element - Parts of a block and have no standalone meaning. They are semantically tied to its block.
• Modifier - Flags on blocks or elements. Use them to change appearance or behavior.

Example

/* Block */
.woocommerce-loop {}

/* Nested block */
.woocommerce-loop-product {}

/* Modifier */
.woocommerce-loop-product--sale {}

/* Element */
.woocommerce-loop-product__link {}

/* Element */
.woocommerce-loop-product__button-add-to-cart {}

/* Modifier */
.woocommerce-loop-product__button-add-to-cart--added {}

Note: .woocommerce-loop-product is not named as such because the block is nested within .woocommerce-loop. It's to be specific so that we can have separate classes for single products, cart products, etc. Nested blocks do not need to inherit their parents full name.

TL;DR

• Follow the WordPress Coding standards for CSS unless it contradicts anything here.
• Follow Calypso guidelines for CSS.
• Use BEM for class names.
• Prefix all class names.