Naming Convention

We use a pretty unique naming convention for the classes in Splendid Labz.

<!-- Our naming convention -->
<div class="ComponentName-modifierName">...</div>

Most CSS writers would scream when they read this blasphemy because CSS is supposed to be in kebab-case. (It’s written in de-facto best practices documents somewhere in the interwebs).

Sarcasm aside, we know this convention seems strange, so let us take a few minutes to explain why we decided to introduce this blasphemy, even though we’re also avid CSS (and best-practice) lovers.

It’s pretty common

If you put aside the fact that CSS should be in kebab-case, this naming convention is actually pretty common!

Ubiquitous frameworks like React, Vue, and Svelte all use PascalCase for component filenames — so it’s not a big stretch to give the component a PascalCase class as well.

<!-- PascalCase is already used for components... -->
<Accordion class="Accordion">...</Accordion>

It’s more flexible

Dashes are often used to separate words, so you’re limited to a single word when you create components with kebab case. It starts to get unwieldy the moment your component name becomes two words.

<div class="hero-heading"> ... </div>

<div class="HeroHeading">...</div>

In the two examples above, hero-heading looks like two words — and therefore two entities — while HeroHeading is clearly a single entity.

So, by using PascalCase, you’ll have an easier time naming components since you’re no longer limited to a single word.

It’s more parsable

Compare our naming convention to BEM — one of the most agreed upon naming conventions — and you’ll see which one is easier to parse and understand.

<!-- BEM -->
<div class="component-name--modifier-name">...</div>

<!-- Our naming convention -->
<div class="ComponentName-modifierName">...</div>

The BEM convention (component-name--modifier-name) looks like 4 words on first glance, so the component looks far more complex than it really is.

Also, dashes in BEM serve double duty — separating words and separating components & modifiers — making them much harder to parse.

On the other hand, with our naming convention (ComponentName-modifierName), you can immediately tell that this is one component with a modifier — it is much easier to parse, especially when you have hundreds or thousands of such classes in your HTML.

Usage with Stylelint

If you use recommended stylelint configs, you’ll encounter resistance when trying to adopt our convention. That’s because these configs usually enforce kebab-case.

To disable kebab-case enforcement, you can use this rule in your .stylelintrc.js file:

module.exports = {
  rules: {
    'selector-class-pattern': null, // Disables naming convention enforcement
  },
}

Hope you enjoy our unorthodox (yet incredibly effective) naming convention!

Splendid Labz Stylelint Configuration

We’ve included an opinionated stylelint configuration that also orders your properties according to a set of defined rules.

If you’re interested, you can install and use our configuration:

npm install @splendidlabz/stylelint-config

// .stylelintrc.js
module.exports = {
  extends: ['@splendidlabz/stylelint-config'],
}

<div class="[--property:value]">...</div>