2.2 KiB
CSS/Sass naming conventions
Table of Contents:
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.