Stylelint configuration for Qumu

This configuration needs Stylelint v14+. If you need to use Stylelint 13 and below, please use https://github.com/qumu/code-conventions.

Usage

To use our configuration, you first need to install Sylelint and the Enghouse Qumu rules.

npm install --save-dev stylelint @enghouse-qumu/stylelint-config-qumu

Once installed, create a .stylelintrc file and add the following code:

{
  "extends": "@enghouse-qumu/stylelint-config-qumu"
}

Extending the configuration

Simply add a "rules" key to your config and add your overrides there.

For example, to change the indentation to tabs and turn off the number-leading-zero rule:

{
  "extends": "@enghouse-qumu/stylelint-config-qumu",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null
  }
}

Table of Contents

1. Terminology
2. CSS
3. Scss

Terminology

• 1.1 Rule declatation: A “rule declaration” is the name given to a selector (or a group of selectors) with an accompanying group of properties. Here's an example:

.listing {
  font-size: 18px;
  line-height: 1.2;
}

• 1.2 Selectors: In a rule declaration, “selectors” are the bits that determine which elements in the DOM tree will be styled by the defined properties. Selectors can match HTML elements, as well as an element's class, ID, or any of its attributes. Here are some examples of selectors:

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

• 1.3 Properties: Finally, properties are what give the selected elements of a rule declaration their style. Properties are key-value pairs, and a rule declaration can contain one or more property declarations. Property declarations look like this:

/* some selector */ {
  background: #f1f1f1;
  color: #333;
}

⬆ back to top

CSS

• 2.1 Indent: Use soft tabs (2 spaces) for indentation. Use 4 spaces for continuous indentation.

/* bad */
.myClass {
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 3px #fff,
      0 0 3px #ff0000;
}

/* good */
.myClass {
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 
      0 0 3px #fff,
      0 0 3px #ff0000;
}

• 2.2 Class names: Prefer camelCasing in class names. Use BEM (http://getbem.com/naming/). Underscores are only acceptable when defining/specifying child elements. Dashes are only acceptable when defining/specifying modifiers.

/* bad */
.my-super-class {}
.MySuperClass {}
.my_super_class {}
.mySuperClass__MyElement {}
.mySuperClass--MyModifier {}

/* good */
.mySuperClass {}
.mySuperClass__myElement {}
.mySuperClass--myModifier {}
.mySuperClass__myElement--myModifier {}

• 2.3 Do NOT use ID selectors.

• 2.4 When using multiple selectors in a rule declaration, give each selector its own line.

/* bad */
.myClass, .myOtherClass {}

/* good */
.myClass,
.myOtherClass {}

• 2.4 States selectors (:hover, :focus) are preceded of one colon, before/after pseudo selector (::before, ::after) are preceded of two colons.

/* bad */
.myClass:before {}

/* good */
.myClass:hover {}
.myClass::before {}

• 2.6 Put a space before the opening brace { in rule declarations. Put the closing brace } of rule declarations on a new line.

/* bad */
.myClass{
  height: 10px; }

/* good */
.myClass {
  height: 10px;
}

• 2.7 In properties, put a space after, but not before, the : character.

/* bad */
.myClass{
  height:10px; 
}

.myClass{
  height :10px; 
}

.myClass{
  height : 10px; 
}

/* good */
.myClass {
  height: 10px;
}

• 2.8 Each property should be on its own line

/* bad */
.myClass {
  border: 2px solid white; border-radius: 50%;
}

/* good */
.myClass {
  border: 2px solid white;
  border-radius: 50%;
}

• 2.9 Order your properties in ascending order.

/* bad */
.myClass {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

/* good */
.myClass {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

• 2.10 Use hex for plain colors. Prefer hex over names for colors. Use rgba for transparent colors. Use the short notation as much as possible.

/* bad */
.myClass {
  background: white;
}

.myClass {
  background: rgba(255, 255, 255, 1);
}

.myClass {
  background: #ffffff;
}

/* good */
.myClass {
  background: #fff;
}

.myClass {
  background: rgba(255, 255, 255, .5);
}

• 2.11 Whenever possible, use a unit-less value. Do not define a unit when the value is 0. Define the unit using lowercase.

/* bad */
.myClass {
  height: 10PX;
  line-height: 21px;
  padding: 0px;
}

/* good */
.myClass {
  height: 10px;
  line-height: 1.5;
  padding: 0;
}

• 2.12 Remove leading and trailing zeros from numbers.

/* bad */
.myClass {
  height: 010px;
  padding: 0.20px;
}

/* good */
.myClass {
  height: 10px;
  padding: .2px;
}

• 2.13 Place comments on a newline above the subject of the comment. Put an empty line before the comment unless it’s on the first line of a block.

/* bad */
.myClass {
  right: 0; /* this is a comment */
  top: 0; /* this is a another comment */
}

/* good */
.myClass {
  /* this is a comment */
  right: 0;

  /* this is a another comment */
  top: 0;
}

SCSS

• 3.1 Use the .scss syntax, never the original .sass syntax.

• 3.2 Prefer dash-cased variable names (e.g. $my-variable) over camelCased or snake_cased variable names. It is acceptable to prefix variable names that are intended to be used only within the same file with an underscore (e.g. $_my-variable).

• 3.3 Mixins should be used to DRY up your code, add clarity, or abstract complexity--in much the same way as well-named functions. Mixins that accept no arguments can be useful for this, but note that if you are not compressing your payload (e.g. gzip), this may contribute to unnecessary code duplication in the resulting styles.

• 3.4 @extend should be avoided because it has unintuitive and potentially dangerous behavior, especially when used with nested selectors. Even extending top-level placeholder selectors can cause problems if the order of selectors ends up changing later (e.g. if they are in other files and the order the files are loaded shifts). Gzipping should handle most of the savings you would have gained by using @extend, and you can DRY up your stylesheets nicely with mixins.

• 3.5 Do not nest selectors more than three levels deep!

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}

• 3.6 Prefer line comments (//) to block comments.

⬆ back to top