search

kneath / kss

A methodology for documenting CSS and generating styleguides.
warpspire.com/kss
MIT License
4.04k stars 275 forks source link

Add attribute support #114

Open lukeapage opened 9 years ago

lukeapage commented 9 years ago

from: https://github.com/kss-node/kss-node/issues/52

What if my modifiers are not always class names? E.g. I often use ARIA role attributes as modifiers:

.btn[aria-disabled="true"] { ... }

I did not find any practicable solution to document those.

Didel commented 5 years ago

How about we just use the same notation as in the css attribute selector (https://www.w3schools.com/css/css_attribute_selectors.asp) :

/*
  Component with attributes

  .active - The component when it also has the '.active' class.
  :hover - The hover styling for this component.
  [disabled] - The component with the disabled attribute.
  [disabled]:hover - the component with the disabled attribute when it is hovered.
  [width="500"] - The component with the width attribute that has a value of 500.
  [href^="mailto"] - The component if the href attribute starts with 'mailto'.
*/