Ideas for a better CSS

[gpbl]

While porting the Less framework to Sass, I've got some ideas for improving the CSS structure.

In my experience, following some of the suggestions explained in the CSS guidelines would lead to a cleaner and maintainable CSS. In particular, I'd avoid deep nesting with the adoption of a BEM-like naming syntax, which would allow developers to easily extend the base CSS without the need to understand its structure by reading both the CSS and the javascript.

As example, take the current input.less:

.mui-input {
  textarea {
    &:focus {
      &+.mui-input-placeholder {
        &+.mui-input-highlight {
          &+.mui-input-bar {
            &+.mui-input-description {
            }
          }
        }
      }
    }
  }
  input {
    &:focus {
      &+.mui-input-placeholder {
        &+.mui-input-highlight {
          &+.mui-input-bar {
            &+.mui-input-description {
            }
          }
        }
      }
    }
  }
}

This could become:

.mui-input { // container. Nothing is nested here }

.mui-input__textarea           { } // <textarea />
.mui-input__textarea--focused  { } // <textarea:focus />
.mui-input__textfield          { } // <input />
.mui-input__textfield--focused { } // <input:focus />

.mui-input__highlight   { } // <div />
.mui-input__placeholder { } // <div />
.mui-input__bar         { } // <div />
.mui-input__description { } // <div />

.mui-input__highlight--focused   { } 
.mui-input__placeholder--focused { } 
.mui-input__bar--focused         { } 
.mui-input__description--focused { } 

// not a fan of this kind of selectors, but having textearea and inputs 
// in the same component we would need something like that:
.mui-input__textarea ~ .mui-input__highlight--focused { 
  // Readable way to indicate the focused highlight element when sibling of texture
}

.mui-input__textfield ~ .mui-input__highlight--focused { }

I admit the case of the <mui.Input /> is interesting since there's a lot going on there. So with the CSS above and starting from the following JSX:

<textarea class="mui-input__textarea" ref="field" onFocus={this._onFocus } />
<div class="mui-input__highlight" ref="highlight" />
<div class="mui-input__placeholder" ref="placeholder" />
<div class="mui-input__bar" ref="bar" />
<div class="mui-input__description" ref="description" />

we would add the --focused modifier with _onFocus method:

_onFocus() {
  this.refs.field.addClass('mui-input__textarea--focused');
  this.refs.highlight.addClass('mui-input__highlight--focused');
  this.refs.placeholder.addClass('mui-input__placeholder--focused');
  this.refs.bar.addClass('mui-input__bar--focused');
  this.refs.description.addClass('mui-input__description--focused');
}

Apart from the sibling selector, which I would solve using another component like <mui.Textarea />, this pattern looses the nesting structure and makes it easier to control the content of a mui-inputs container.

It also would help a hopeful javascript refactoring in the future, since it does not fit well with nested selectors.

What do you think?

[hai-cea]

Yes, I agree that the input styles need some optimization. I'm also not a fan of heavy nesting. I think we can spend some time to clean this up a bit.

[yhsiang]

Maybe use SUITCSS? Borrow many ideas from BEM.

[hai-cea]

This has been cleaned up with TextField. :)