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