Nesting classes

[tenhobi]

Hello!

Can I ask you why do you not use nesting in your styles for classes? What are the benefits?

For example for your List component (only a part and w/o comments):

.list {
  padding: 0; /* 1 */
  margin: 0; /* 1 */
  list-style: none; /* 1 */
  clear: both;
}

.list__item {
  margin: 10px 0;
  padding: 20px 0;
  border-bottom: 1px solid $light-grey;
}

.list__item:last-of-type {
  border-bottom: 0;
}

vs

.list {
  padding: 0; /* 1 */
  margin: 0; /* 1 */
  list-style: none; /* 1 */
  clear: both;

  &__item {
    margin: 10px 0;
    padding: 20px 0;
    border-bottom: 1px solid $light-grey;

    &:last-of-type {
      border-bottom: 0;
    }
  }
}

[tenhobi]

I have took a loot to the Sass Guidelines and I found the answer here - http://sass-guidelin.es/#selector-nesting. I haven't transladet this part yet and I had not thought to look there, so excuse me, @hugogiraudel. 😸

But you are right. I do this nesting with & and it is not always as readable as it could be.

[KittyGiraudel]

No problem! Basically yes, selector nesting usually hurts readability and maintainability for pretty much no gain.

[tenhobi]

On my app I write styles with ca. 2 thousand lines of code and this was the problem for me + the IDE do not know how to link "html class" to scss class.

I am really glad I can ask somebody who do Sass well. 👍