To avoid class name collisions between elements of the woo app and to the enclosing WordPress dashboard, class names **must** adhere to the following guidelines:
Any default export of a folder's `index.js`**must** be prefixed with `woocommerce-` followed by the directory name in which it resides:
>.woocommerce-_[ directory name ]_
(Example: `.woocommerce-card` from `components/card/index.js`)
For any descendant of the top-level (`index.js`) element, prefix using the top-level element's class name separated by two underscores:
>.woocommerce-_[ directory name ]_\_\__[ descendant description ]_
(Example: `.woocommerce-card__title`, or `.woocommerce-ellipsis-menu__item`)
For optional variations of an element or its descendants, you may use a modifier class, but you **must not** apply styles to the modifier class directly; only as an additional selector to the element to which the modifier applies:
>.woocommerce-_[ directory name ]_.is-_[ modifier description ]_
>.woocommerce-_[ directory name ]_\_\__[ descendant description ]_.is-_[ modifier description ]_
In all of the above cases, except in separating the top-level element from its descendants, you **must** use dash delimiters when expressing multiple terms of a name. You can use `.is-*` or `.has-*` to describe element states.
You may observe that these conventions adhere closely to the [BEM (Blocks, Elements, Modifiers)](http://getbem.com/introduction/) CSS methodology, with minor adjustments to the application of modifiers.
## Naming: Layout classes
All layout classes use the `.woocommerce-layout__` prefix:
