Skip to content
An experimental, mixin-supported, alternative to the BEM naming convention
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
example-case.input.scss
example-case.output.css
mixins.scss

README.md

Dresscode

An experimental (meaning: do not use this) mixin-supported alternative to the BEM naming convention.

Gif of Jeff Goldblum in Jurrassic Park with the quote "Your scientists were so preoccupied with whether or not they could, they never stopped to think if they should"

Demo of Dresscode in use, from the example case included in the repo.


Use Case: turns typical BEM classes like this:

<!-- Typical BEM -->
<div class="header--signed-out__logo--dark-mode">

into this:

<!-- Dresscode -->
<div class="header~signed-out:logo~dark-mode">

examples:

  • <div class="parent">
  • <div class="parent:child">
  • <div class="parent~variant:child">
  • <div class="parent:child~variant">
  • <div class="parent~variant:child~variant">
You can’t perform that action at this time.