55 lines
2.2 KiB
Markdown
55 lines
2.2 KiB
Markdown
# CSS
|
|
|
|
## Naming: Component classes
|
|
|
|
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 ]_
|
|
|
|
(Example: `.woocommerce-ellipsis-menu__item.is-active` )
|
|
|
|
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:
|
|
|
|
>.woocommerce-layout\_\__[ section ]_
|
|
|
|
(Example: `.woocommerce-layout__activity-panel` )
|
|
|
|
If the section has children elements, prefix a description with the section class name:
|
|
|
|
>.woocommerce-layout\_\__[ section ]_-_[ descendant description ]_
|
|
|
|
(Example: `.woocommerce-layout__activity-panel-title` )
|
|
|
|
## Naming: Dashboard classes
|
|
|
|
All dashboard components use the `.woocommerce-dashboard__` prefix:
|
|
|
|
>.woocommerce-dashboard\_\__[ section ]_
|
|
|
|
(Example: `.woocommerce-dashboard__widget` )
|
|
|
|
## Naming: Analytics classes
|
|
|
|
All analytics components use the `.woocommerce-analytics__` prefix.
|