Die Anforderungen

werden sich ändern

.easy-ad {
  .easy-ad-right { ... }
  .easy-ad-center { ... }
  .easy-ad-left {
    .easy-ad-left-settings {
      div {
        label {
          span {
            div.triangle-up {
              position: absolute;
              margin-top: 23px;
              left: 45px;
              width: 0;
              height: 0;
              z-index: 1;
              border-bottom: 10px solid #808080;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
            }
          }
        }
      }
    }
  }
}
#site-header {
  nav > ul > li {
    &:not(.not-visible):hover > .menu-overlays-overlay-container > .menu-overlays-fade,
    &.force-visible > .menu-overlays-overlay-container > .menu-overlays-fade {
      opacity: 1;
      pointer-events: auto;
    }
  }
}
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"] {
  ...
}

button {
  ...
}

label {
  span {
    div {
       ...
    }
 }
}
    
.header-info {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.btn {
    border: 1px #000 solid;
    &.btn--primary {
        background: red;
    }
}

LESS/SASS

.btn {
    border: 1px #000 solid;
}
.btn.btn--primary {
    background: red;
}

CSS

<a class="btn btn--primary">My Button</a>

HTML

<a class="btn btn--primary my-special-button">Some Special Button</a>

HTML

.my-awesome-button {
    ...
}

CSS

.btn {
    border: 1px #000 solid;
    &.btn--primary {
        background: red;
    }
}

LESS/SASS

.btn {
    border: 1px #000 solid;
}
.btn--primary {
    background: red;
}

CSS

.btn {
    border: 1px #000 solid;
    &--primary {
        background: red;
    }
}
<a class="btn btn--primary">My Button</a>

HTML

Aber Sergey...

.slide {
  ...
}

.slide-image {
  ...
}

.slide-text {
  ...
}

.slide-highlight {
  ...
}
.super-slide
.super-slide__image
.super-slide--highlighted
.easy-ad__left__settings__label__help__triangle--up__fuckoff {}

http://pirna-patternlab.now.sh

  • Verschachtelung wenn möglich vermeiden
  • Maximal 3 Ebenen von Verschachtelung
  • Keine HTML tags (nav ul li)
  • Keine IDs (#one)
  • Keine Kindselektoren (.one > .two)
  • Kein Bullshit (div.one > .two.three > :not(.yes) > span
  • BEM

Make CSS great again

By Sergey Ryzhov

Make CSS great again

  • 698