Edge cases

[rstacruz]

Here are some cases in existing code bases that stylelint-rscss reports as errors. Maybe they should be adjusted for consideration.

1. Tables can easily get a "too deep" error. An example would be .my-table > * > tr > td > a:visited (depth 4).
2. [Fixed in v0.3.0] Variants attached to tag names (a.-home) are an error, because variants expect themselves to be attached to elements.
3. [Fixed in v0.3.0] Bootstrap names are failing: btn, jumbotron, container, etc. They don't conform to RSCSS, but you can't really do anything about that in a Bootstrap project. — there's now componentWhitelist to alleviate this.
4. You can't style components-in-components at the moment, ie, .form-fieldset > .form-control. Not sure what should be done here; it's a bad practice (it can lead to specificity issues and mental overhead), but it's a practice that's quite common.
5. [Fixed in v0.3.0] Using adjacent combinators like + and ~ aren't treated properly: eg, .form-row + .form-row considers the second form-row as an element.

[DustinJSilk]

Great work so far!

One thing to think about if you havent already is when you have something like the following:

<section class="article-title">
    <div class="container">
      <span class="text"></span>
      <span class="text -light"></span>
    </div>
</section>

The .container would be used throughout the site with the following styles, for example:

.container {
  max-width: 1280px;
  margin: 0 auto;
}

So possibly an option to add a no-descendant-combinator:combinatorWhiteList option?

[rstacruz]

We usually style those like .article-title > .container > .text - so container is basically an element :)

On Tue, Sep 20, 2016, 7:21 PM DustinJSilk [email protected] wrote:

Great work so far!

One thing to think about if you havent already is when you have something like the following:

The .container would be used throughout the site with the following styles, for example:

.container { max-width: 1280px; margin: 0 auto; }

So possibly an option to add a no-descendant-combinator:combinatorWhiteList option?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/rstacruz/stylelint-rscss/issues/1#issuecomment-248273732, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEikfEc_05Qj34R9dlwqVZPy-5pLqYTks5qr8HNgaJpZM4KBSfF .

[rstacruz]

Ah, and .container will be whitelisted in componentWhitelist (in fact its whitelisted by default), so .component { ... } shouldn't throw an error.

[jerivas]

I'd like to say regarding point 4: RSCSS allows for styling children from parents when you're building layouts like so (taken from the docs):

.article-list {
    @include clearfix;
  
    > .article-card {
       width: 33.3%;
       float: left;
    }
}

Of course, it's up to the developer to only apply sizing and positioning styles when doing this because as stated previously, it can lead to specificity issues. I think this is a fine candidate for being a customizable rule.

[jollycic]

I would advise against enforcing a rule that allows component-in-component styling: personally, I prefer to assign an element-like class to the child component and use it to position and size it, like this

.article-list {
  @include clearfix

  /* 
   * Child component would be <div class="card article-card"></div>
   */
  > .card {
    width: 33.3%;
    float: left;
  }
}

I am quite new to stylelint (I've been toying with it for a couple of days), but, as the RSCSS spec explicitly allows component nesting, I think this case could be treated as a warning level violation.