Skip to content
Home

Naming convention

The DNB Design System Eufemia uses the following naming conventions.

Formatting styles

  • pascal case also known as upper camel case. Every word upper case. Example: PascalCase
  • camel case also known as lower camel case. First word lower case. Example: camelCase
  • kebab case also known as kebab case. Only lower case letters. Example: kebab-case
  • snake case. Only lower case letters. Example: snake_case

React components

  • React Components, both as files and as components use pascal case.
  • The folder containing the component uses kebab case.

CSS / SCSS

  • CSS classes and the files containing the styles use kebab case.
  • CSS classes are prefixed with: dnb-
  • CSS Custom Properties (CSS Variables) use kebab case.
  • SCSS Mixins use camel case.

Javascript

  • Functions and Variables use camel case.
  • Classes use pascal case.
  • Other JavaScript files use kebab case.

Events and Properties

  • Event names use camel case.
  • They have to describe what they are aiming to do. Like: onClick

NB: Existing React components use snake case (on_click) – but will be converted to use camel case (onClick) in future releases. The reason for using snake case was to support Web Components – but the support has been discontinued in v10.

Icons

  • Icon names use snake case.
  • They have to describe what they are aiming to meant for. Like: chevron_right
  • Sizes are added as a postfix. Like: chevron_right_medium
  • Only alphabetic characters (a to z) without special chars, due to import statements.
  • Figma icon naming has to match the same (icon archive) as they will define the import names.
  • Figma page and frame names (icon archive) do have to consist the same, due to the automated import mechanism.

Documentation

  • Pages and directories use kebab case.