- **Epistemic status:** #budding Standardizing a naming convention in your [[Design Language System]] creates an [[Ubiquitous Language]] between designers and developers for easier communication. [[Atomic Design]] and BEM (Block Element Modifier) can be mixed together to aid you when naming components of your [[Design Language System]]. You can use the following set of rules as a guideline: - The name of the component will be written in kebab-case for design and source code files. Designers and developers will be able to search easily because they fall under a common paradigm. - Use distinctive clear names that make sense to the team and newcomers avoiding mistakes and confusion - Name Components based on their role in the [[Design Language System]]. Instead of naming a component a-button-blue, name it a-button-primary. ![[atomic-design-naming.svg]] 1. **Atom, molecule or organism** type that the block belongs to. All you need to use is the first letter for identification purposes. 2. **Block** is a component of the system that is meaningful on its own, e.g., header, menu, button, checkbox, input, etc. 3. **Element** is a component that is dependent on a block e.g., menu-item, list-item, checkbox-caption, header-title, etc. 1. **Optional if no element component exists** 4. **Modifier** changes the appearance or behavior of either a block or an element component e.g., menu-item-highlighted, button-primary, button-alternative-secondary, etc. 1. **Optional if no modifier exists** --- ## References - “Case Styles: Camel, Pascal, Snake, and Kebab Case | by Patrick Divine | Better Programming.” Accessed October 4, 2021. <https://betterprogramming.pub/string-case-styles-camel-pascal-snake-and-kebab-case-981407998841>. - contributors, Vsevolod Strukchinsky, Vladimir Starkov and. “BEM — Block Element Modifier.” Accessed October 4, 2021. <http://getbem.com/>. - Syvets, Igor. “Building Design Systems with Atomic Design.” Medium, March 26, 2018. <https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676>.