Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Working with state classes #273

Open
CKGrafico opened this issue Oct 3, 2019 · 1 comment
Open

Working with state classes #273

CKGrafico opened this issue Oct 3, 2019 · 1 comment

Comments

@CKGrafico
Copy link

CKGrafico commented Oct 3, 2019

We are using this library in 2 of our projects and works really well.
But one of the practices that we usually use are "State classes" like http://smacss.com/book/type-state

for example if we have

<div styleName="menu__item"></div>

this element can sometimes have this class

<div styleName="menu__item is-active"></div>

To try to style things like this we had to use multiple modules and have a CSS like:

.menu__item {
  color: red;
}

.is-active {
  color: blue;
}

ideally we would like to use

.menu__item {
  color: red;

  &.is-active {
    color: blue;
  }
}

But ok we can more or less work, the problem is when you have something inside menu__item

<div styleName="menu__item is-active">
  <i styleName="menu__icon"></i>
</div>

In that case we cannot do that:

.menu__item {
  color: red;
}

.is-active {
  color: blue;

  .menu__icon {
    color: yellow;
  }
}

or ideally:

.menu {
  &__item {
    color: red;
    
    &.is-active {
      color: blue;
     }
  }

  &__item.is-active &__icon {
    color: yellow; 
  }
}

Are you planning some feature to "disable" selectors that start with a prefix?
For example, for us can be useful to ignore "is-", "u-", etc...

@CKGrafico
Copy link
Author

nothing :'(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant