css-blocks-form-example.md

An example of a simple form

Consider the following markup:

<form class="root" state:theme=dark state:compact>
  <div class="input-area">
    <label for="username" class="label">Username:</label>
    <input id="username" class="input" type="text">
  </div>
  <div class="input-area">
    <label for="password" class="label">Password:</label>
    <input id="password" class="input" type="password">
  </div>
  <button type="submit" class="submit" state:disabled disabled>
</form>

Let's assume this form fragment is associated with this the following block stylesheet (the mechanism for this is unimportant at this time). The block stylesheet styles classes, and attributes in the state namespace:

/* my-form.block.css */
.root                   { block-name: my-form; margin: 2em 0; padding: 1em 0.5em; }
[state|theme=light]     { color: #333; }
[state|theme=dark]      { color: #ccc; }
[state|compact]         { margin: 0.5em 0; padding: 0.5em; }
.input-area             { display: flex; margin: 1em 0; font-size: 1.5rem; }
[state|compact]
  .input-area           { margin: 0.25em 0; }
.label                  { flex-basis: 1; }
.input                  { flex-basis: 3; }
[state|theme=light]
  .input                { border-color: #333; }
[state|theme=dark]
  .input                { border-color: #ccc; }
.submit                 { width: 200px; }
.submit[state|disabled] { color: gray; }

In BEM compatibility mode these would compile to:

<form class="my-form my-form--theme-dark my-form--compact">
  <div class="my-form__input-area">
    <label for="username" class="my-form__label">Username:</label>
    <input id="username" class="my-form__input" type="text">
  </div>
  <div class="my-form__input-area">
    <label for="password" class="my-form__label">Password:</label>
    <input id="password" class="my-form__input" type="password">
  </div>
  <button type="submit" class="my-form__submit my-form__submit--disabled">
</form>

and

.my-form { margin: 2em 0; padding: 1em 0.5em; }
.my-form--theme-light { color: #333; }
.my-form--theme-dark { color: #ccc; }
.my-form--compact { margin: 0.5em 0; padding: 0.5em; }
.my-form__input-area { display: flex; margin: 1em 0; font-size: 1.5rem; }
.my-form--compact .my-form__input-area { margin: 0.25em 0; }
.my-form__label { flex-basis: 1; }
.my-form__input { flex-basis: 3; }
.my-form--theme-light .my-form__input { border-color: #333; }
.my-form--theme-dark .my-form__input { border-color: #ccc; }
.my-form__submit { width: 200px; }
.my-form__submit--disabled { color: gray; }

After optimization it may look more like:

.c4 { margin: 2em 0 }
.c5 { margin: 0.5em 0 }
.c6 { margin: 1em 0 }
.c7 { padding: 1em 0.5em }
.c8 { padding: 0.5em }
.c9 { color: #333 }
.ca { color: #ccc }
.cb { color: gray }
.cc { display: flex }
.cd { font-size: 1.5rem }
.ce { flex-basis: 1 }
.cf { flex-basis: 3 }
.cg { width: 200px }
.c3 .ch { margin: 0.25em 0 }
.c1 .ci { border-color: #333 }
.c2 .cj { border-color: #ccc }

and the template would become:

<form class="c4 c7 c3 c2">
  <div class="cc c6 cd ch">
    <label for="username" class="ce">Username:</label>
    <input id="username" class="cf" type="text">
  </div>
  <div class="cc c6 cd ch">
    <label for="password" class="ce">Password:</label>
    <input id="password" class="cf" type="password">
  </div>
  <button type="submit" class="cg cb">
</form>