Code Standards

In the following guides, you will find some basic code formatting conventions used in LUCI.

HTML Guide

  • Set your text editor to use tabs with 4 spaces.
  • Indent nested HTML elements.
  • Use double quotes for attributes
  • Add a new line at the end of files
HTML Example
<a class="luci-link" href="somewhere.html">
    <span class="luci-link__text"> Standard Text </span>

CSS Guide

  • Set your text editor to use tabs with 4 spaces.
  • Component class name should follow the BEM (Block, Element, Modifier) naming convention.
  • LUCI component class names should be prefixed with luci- in order to namespace the library.
  • Do not include vendor prefixes. Autoprefixer automatically adds these when the CSS is compiled.
  • LUCI does not use a global CSS reset or normalize.
  • List mixins before properties.
  • Alphabetize properties within selectors.
  • Add a new line between blocks.
  • Add a new line at the end of files.
  • Watch for console errors during development. SCSS lint settings are defined in .sass-lint.yml.
CSS BEM Example
.luci-block {}

.luci-block--modifier {}

.luci-block__element {}

.luci-block__element--modifier {}
HTML BEM Example
<ul class="luci-block luci-block--modifier">
    <li class="luci-block__element luci-block__element--modifier"></li>

SCSS Guide

  • Elements should NOT be nested inside of the block.
.luci-block {

    .luci-block__element {
        /* This selector is too specific. */
        /* Don't nest elements inside of blocks. */
  • Environmental modifiers should be nested in the selector.
.luci-block__element {

    .luci-block--modifier & {
        /* This keeps element styles all together. */


The component javascript used in the LUCI documentation site is meant to demonstrate presentational functionality.
JS files are not inteded for use in production.

Browser Support and Optimization

The LUCI design system is optimized for the following browsers:

Browser Version

Google Chrome


Mozilla Firefox




Internet Explorer


Microsoft Edge