amcss / attribute-module-specification

The Attribute-Module CSS (AMCSS) Specification
MIT License
393 stars 8 forks source link

Chaining traits #24

Closed ghost closed 9 years ago

ghost commented 9 years ago

I really like the idea behind AMCSS, but it seems to lack an essential feature -- trait chaining.

In CSS you can chain classes to apply specific styles only when certain classes co-exist on an element:

.foo { background: #f00; }
.bar { color: #fff; }
.foo.bar { font-size: 1.5em; }

Unfortunately I couldn't find a way to achieve this with AMCSS. It's possible to chain attributes like [am-foo][am-bar], but that defeats the purpose whilst chaining attribute values is desired instead.

EDIT: I'm sorry, it was late last night and I totally overlooked this simple solution I was after. Obviously you can chain any types of attributes, like so:

[am-foo~="bar"] { background: #f00; }
[am-foo~="baz"] { color: #fff; }
[am-foo~="bar"][am-foo~="baz"] { font-size: 1.5em; }