Component Styles v1.0.0

TODO: Add description

Installation

npm install component-styles

@import 'path/to/node_modules/component-styles'

Features

1. Component - Nested component - Sibling component (adjacent) - Sibling component (general) - Child component (direct descendant)
2. Element - Sibling element (adjacent) - Sibling element (general) - Child element (direct descendant)
3. Modifier - Parent modifier - Component modifier
4. Pseudo - Parent pseudo - Component pseudo
5. Utility

Component

Basic usage

+component('Button')
  // 1

+component('Panel', 'Card')
  // 2

.Button {
  /* 1 */
}
.Panel,
.Card {
  /* 2 */
}

Back to Features

Nested component

+component('Card')
  +component('Icon')
    // 1

.Card .Icon {
  /* 1 */
}

Back to Features

Sibling component (adjacent)

+component('Card')
  +sibling-component('Panel')
    // 1

  +sibling-component('Panel', 'Avatar')
    // 2

.Card + .Panel {
  /* 1 */
}
.Card + .Panel,
.Card + .Avatar {
  /* 2 */
}

Back to Features

Sibling component (general)

+component('Card')
  +general-sibling-component('Panel')
    // 1

  +general-sibling-component('Panel', 'Avatar')
    // 2

.Card ~ .Panel {
  /* 1 */
}
.Card ~ .Panel,
.Card ~ .Avatar {
  /* 2 */
}

Back to Features

Child component (direct descendant)

+component('Card')
  +child-component('Panel')
    // 1

  +child-component('Panel', 'Avatar')
    // 2

.Card > .Panel {
  /* 1 */
}
.Card > .Panel,
.Card > .Avatar {
  /* 2 */
}

Back to Features

Element

Basic usage

+component('Panel')
  +element('header')
    // 1

  +element('header', 'footer')
    // 2

  +element('footer')
    +element('text')
      // 3

  +element('header', 'footer')
    +element('text')
      // 4

.Panel-header {
  /* 1 */
}
.Panel-header,
.Panel-footer {
  /* 2 */
}
.Panel-footer-text {
  /* 3 */
}
.Panel-header-text,
.Panel-footer-text {
  /* 4 */
}

Back to Features

Sibling element (adjacent)

+component('Panel')
  +element('header')
    +sibling-element('footer')
      // 1

    +sibling-element('body', 'footer')
      // 2

.Panel-header + .Panel-footer {
  /* 1 */
}
.Panel-header + .Panel-body,
.Panel-footer + .Panel-footer {
  /* 2 */
}

Back to Features

Sibling element (general)

+component('Panel')
  +element('header')
    +general-sibling-element('footer')
      // 1

    +general-sibling-element('body', 'footer')
      // 2

.Panel-header ~ .Panel-footer {
  /* 1 */
}
.Panel-header ~ .Panel-body,
.Panel-footer ~ .Panel-footer {
  /* 2 */
}

Back to Features

Child element (direct descendant)

+component('Panel')
  +child-element('content')
    // 1

  +child-element('header', 'footer')
    // 2

.Panel > .Panel-content {
  /* 1 */
}
.Panel > .Panel-header,
.Panel > .Panel-footer {
  /* 2 */
}

Back to Features

Modifier

Basic usage

+component('Button')
  // 1
  +modifier('primary')
    // 2
    +modifier('active')
    // 3
  +modifier('warning', 'outline')
    // 4

.Button {
  /* 1 */
}
.Button.\*primary {
  /* 2 */
}
.Button.\*primary.\*active {
  /* 3 */
}
.Button.\*warning.\*outline {
  /* 4 */
}

Back to Features

Parent modifier

+component('Panel')
  +element('body')
    +element('list')
      +element('item')
        +element('icon')
          +parent-modifier('primary')
            // 1

          +parent-modifier('primary', 'outline')
            // 2

.Panel-body-list-item.\*primary .Panel-body-list-item-icon {
  /* 1 */
}
.Panel-body-list-item.\*primary.\*outline .Panel-body-list-item-icon {
  /* 2 */
}

Back to Features

Component modifier

+component('Panel')
  +element('body')
    +element('list')
      +element('item')
        +element('icon')
          +component-modifier('primary')
            // 1

          +component-modifier('primary', 'outline')
            // 2

          +modifier('awesome')
            +component-modifier('primary')
              // 3

.Panel.\*primary .Panel-body-list-item-icon {
  /* 1 */
}
.Panel.\*primary.\*outline .Panel-body-list-item-icon {
  /* 2 */
}
.Panel.\*primary .Panel-body-list-item-icon.\*awesome {
  /* 3 */
}

Back to Features

Pseudo

Basic usage

+component('Panel')
  +pseudo('hover')
    // 1

.Panel:hover {
  /* 1 */
}

Back to Features

Parent pseudo

+component('Panel')
  +element('header')
    +element('text')
      +parent-pseudo('hover')
        // 1

.Panel-header:hover .Panel-header-text {
  /* 1 */
}

Back to Features

Component pseudo

+component('Panel')
  +element('header')
    +element('text')
      +component-pseudo('hover')
        // 1

.Panel:hover .Panel-header-text {
  /* 1 */
}

Back to Features

Utility

+utility('hidden')
  // 1

#component-styles .\+hidden {
  /* 1 */
}

Back to Features