Naming conventions

Prefer using styled components with Radium, rather than CSS. However, Kitten comes with SASS components as well.

Table of contents

1. CSS

• Component classes
• Utility classes
• Component's state classes
• Order's styles
• Modifiers

2. Sass

• Files
• Variables and map keys
• Sass functions
• Sass mixins
  • With selector output
  • With properties output

CSS

Component classes

kitten uses the BEM methodology the structure and name the CSS. We chose a custom naming scheme based on Harry Roberts's reflexions and our own needs:

k-BlockName__elementName--modifier

• Names are prefixed with k-.
• Blocks matches a kitten component.
• Block names are written in UpperCamelCase (to match future React components).
• Element and modifier names are written in lowerCamelCase.
• An element name is separated from a block name by a double underscore (__).
• Modifiers are delimited by double hyphens (--).

Utility classes

Based on: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md.

Utility classes can be used to create simple structure or temporary pages. Learn more about how to use utility classes.

k-u-pullStart

• Names are prefixed with k-u.
• Names are written in lowerCamelCase.

Component's state classes

Based on: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md.

Component's state classes reflect state changes on a component. Learn more about how to use component's state classes.

is-widelyOpened

• Names are prefixed with is-.
• Names are written in lowerCamelCase.

Order's styles

.foobar {

  // Position
  display: …;
  position: …;
  top: …;
  right: …;
  bottom: …;
  left: …;
  z-index: …;
  …

  // Boxing
  box-sizing: …;
  width: …;
  height: …;
  min-width: …;
  min-height: …;
  margin: …;
  padding: …;
  …

  // Painting
  outline: …;
  border: …;
  background: …;
  …

  // Typography
  font: …;
  line-height: …; 
  color: …;
  text-align: …; 
  text-transform: …;
  …

  // Other
  cursor: …;
}

Modifiers

Buttons

On buttons, we use the periodic table of elements to name buttons: hydrogen, helium, lithium, beryllium, boron… For example k-Button--hydrogen.

Size

We use the following naming for component sizing modifiers:

• huge
• big
• default
• tiny
• micro
• nano

Eg:

.k-Button--huge { … }
.k-Button--big { … }
.k-Button--default { … }
.k-Button--tiny { … }
.k-Button--micro { … }
.k-Button--nano { … }

Sass

Files

_vertical-rhythm.scss

• Names are prefixed with _ (as they are Sass partials).
• Names are written in lower case.
• Words within the names are separated by a hyphen (-).

Variables and map keys

$k-variable: value;
$k-map: (
  first-variable: value,
  second-variable: another-value
);

• Names are prefixed with k-.
• Names are written in lower case.
• Words within the names are separated by a hyphen (-).

Sass functions

@function k-namespace-my-function {
  // Fantastic code.
}

• Names are prefixed with k-.
• Names include the function namespace, which matches the directory where the function is.
• Names are written in lower case.
• Words within the names are separated by a hyphen (-).

Example :

// kitten/helpers/typography/_typeface-for.scss

@function k-typography-typeface-for {
  // the function body
}

Sass mixins

With selector output

@mixin k-NamespaceBlockName {
  // A mixin that lets off a firework.
}

• Names are prefixed with k-.
• Names include the mixin namespace, which matches the directory where the mixin is in.
• Names are written in UpperCamelCase (to match with the block class name).

Example :

// kitten/atoms/typography/_scale.scss

@mixin k-TypographyScale {
  // the mixin body
}

With properties output

@mixin k-namespaceBlockNameHelperMixin {
  // A mixin that produces some music.
}

• Names are prefixed with k-.
• Names include the mixin namespace, which matches the directory where the mixin is.
• Names are written in lowerCamelCase.

Example :

// kitten/helpers/typography/_font-size.scss

@mixin k-typographyFontSize {
  // the mixin body
}