+component

Component is a very base entity in this component-based methodology and framework. It can be any simple/single element, or any block of the website (structure of elements).

+component($selector)

$selector: single, simple or combinator selector - unique selector of the component (root element of the component).

SASS

+component('#footer')
  display: inline-block

SCSS

@include component('#footer') {
  display: inline-block;
}

#footer {
  display: inline-block;
}

+component($selectors...)

$selectors...: more single, simple or combinator selectors - unique selectors of the component, if multiple works/looks the same.

SASS

+component('#footer', '.footer')
  display: inline-block

SCSS

@include component('#footer', '.footer') {
  display: inline-block;
}

#footer, .footer {
  display: inline-block;
}

+component($alias, $selector)

$alias: any string enclosed in curly braces - Those curly braces indicate that it is an alias and not a selector. Alias must be unique for all components.

$selector: single, simple or combinator selector - unique selector of the component.

SASS

+component('{footer}', '#footer')
  display: inline-block

SCSS

@include component('{footer}', '#footer') {
  display: inline-block;
}

#footer {
  display: inline-block;
}

+component($alias, $selectors...)

$alias: any string enclosed in curly braces - Those curly braces indicate that it is an alias and not a selector. Alias must be unique for all components.

$selectors...: more single, simple or combinator selectors - unique selectors of the component, if multiple works/looks the same.

SASS

+component('{footer}', '#footer', '.footer')
  display: inline-block

SCSS

@include component('{footer}', '#footer', '.footer') {
  display: inline-block;
}

#footer, .footer {
  display: inline-block;
}

---

Recommendations

1. Use a single component per file.
2. If there are several components in one file, separate them with at least 3 empty lines.
3. Use aliases for all non-trivial component selectors.
4. Do not directly increase the component selector specificity. Rather use special mixins.
5. Ideal component selector is a simple selector, see Ideal component selector below.

Ideal component selector

Ideal component selector is a simple selector:
+component('.btn')
+component('input[type=text]')
+component('#footer')
+component('button')

The second best option is the combinator selector with tight connection:
+component('.article > header')
+component('.header + .content')

But if there is a component only with the tail of selectors above, you have to define them as inverse set:
+component(':not(.article) > header')
+component(':not(.header) + .content')

For more complex selectors rather add alias:
+component('{general header}', ':not(.article) > header')
+component('{header in article}', '.article > header')

The worst option is selector with spaces or ~:
+component('.list ~ h4')
+component('.list h4')

It's because you can't define the inverse set (h4 which is not in the .list), so you cannot use selector h4 for the other components. You can use selector h4 as a (sub)element in other components, but there will be always uncertainity if there isn't intersection of sets.

What about most common elements

What is the best solution for the most common elements e.g. h1, h2, h3, p, a, button?

The best advice is: "do not create components from the simple HTML elements only".

We have experience from many projects that creating components from the basic semantic elements such a <a>, <p>, <h1-h6>, <img>, <ol>, <ul>, <li>, <strong>, <table>, etc. will lead to overload the component with many variants and contexts and it becomes unmanageable.

You can find more about this topic in the documentation of the Best practices - Do not style standard HTML elements as components.

How to increase component selector specificity

You don't need to increase component selector specificity right in +component mixin. Keep the selector simple and clear and increase specificity with special mixins:

1. add-element-specificity
2. add-class-specificity
3. add-id-specificity
4. add-specificity
5. override

Example:

SASS

// WRONG

+component('.btn.useless-class')

  +register
    +state(':hover')
    +element('.icon')

  +default
    display: inline-block

  +state(':hover')
    background: rgba(black, 0.15)
  
  +______________________________
  +element('.icon')
    vertical-align: middle

SCSS

// WRONG

@include component('.btn.useless-class') {

  @include register {
    +state(':hover')
    +element('.icon')
  }

  @include default {
    display: inline-block;
  }

  @include state(':hover') {
    background: rgba(black, 0.15);
  }
  
  @include ______________________________;
  @include element('.icon') {
    vertical-align: middle;
  }
}

SASS

// RIGHT

+component('.btn')
  +add-class-specificity(1)
    +register
      +state(':hover')
      +element('.icon')

    +default
      display: inline-block

    +state(':hover')
      background: rgba(black, 0.15)
    
    +______________________________
    +element('.icon')
      vertical-align: middle

SCSS

// RIGHT

@include component('.btn') {
  @include add-class-specificity(1) {
    @include register {
      +state(':hover')
      +element('.icon')
    }

    @include default {
      display: inline-block;
    }

    @include state(':hover') {
      background: rgba(black, 0.15);
    }
    
    @include ______________________________;
    @include element('.icon') {
      vertical-align: middle;
    }
  }
}

As you can see in example above, just add specificity for whole component code.