Overview
- Consistent class/element names will make it easier for others to understand and maintain the codebase.
- Using short and concise names will benefits the developers working on the codebase.
- To improve the developer experience and maintain a level of consistency across our components, please use the following class/element names.
Utility Class Naming
When creating classes for a specific function e.g. button groups, then use a clear parent class name to define the functionality. If further nested classes are needed then name these descriptively. The parent class should be used as a prefix.
For example:
- Parent Class - .button-group
- Nested class - .button-group-pair
|
Name |
Usage |
|---|---|
|
co-comp__container |
container |
|
co-comp__header |
header |
|
co-comp__footer |
footer |
|
co-comp__title |
title |
|
co-comp__content |
content |
|
co-comp__text-block |
title + content |
|
co-comp__body |
body / icon + content |
|
co-comp__close |
close button |