Good
.block-name__elem-name_mod-name_mod-val {
...
}
Bad
.topMenuClear {
...
}
Good
application/top_menu_clear.scss for .top-menu-clear
Bad
application/top-menu-clear.scss for .top-menu-clear
Bad
application/topMenuClear.scss for .top-menu-clear
Bad
application/clear.scss for .top-menu-clear
Good
.header_4 {
clear: left;
font-size: 14px;
padding: 3px 0 8px 0;
}
Bad
h4 {
clear: left;
font-size: 14px;
padding: 3px 0 8px 0;
}
Bad
h4.header_4 {
clear: left;
font-size: 14px;
padding: 3px 0 8px 0;
}
Good: separated files
File: application_new/leftbar.scss
.leftbar {
...
}
File: application_new/leftbar_header.scss
.leftbar_header {
...
}
Bad: one huge file with many independent blocks
.leftbar {
...
}
.leftbar-header {
...
}
...
Good
&:after {
content: "";
display: block;
}
Bad
&:after {
content: "";
display: block;
}
Good
&:before,
&:after {
content: "";
display: block;
}
Bad
&:before, &:after { content: ""; display: block; }
Good
&:before,
&:after {
...
}
Bad
&:before, &:after {
...
}
Good
@mixin button($color, $background-color, $hover-color, $hover-background-color, $padding: null, $border-radius: null) {
color: $color;
background-color: $background-color;
border: none;
@if $padding {
padding: $padding;
}
@if $border-radius {
border-radius: $border-radius;
}
&:hover {
background-color: $hover-background-color;
color: $hover-color;
}
}
Bad
@mixin button($color, $background-color, $hover-color, $hover-background-color, $padding: null, $border-radius: null) {
@if $padding {
padding: $padding;
}
color: $color;
background-color: $background-color;
border: none;
@if $border-radius {
border-radius: $border-radius;
}
&:hover {
color: $hover-color;
background-color: $hover-background-color;
}
}
Good
.leftbar-header {
& {
align-items: stretch;
display: flex;
flex: 1 0 100%;
justify-content: right;
}
}
Bad
.leftbar-header {
& {
display: flex;
flex: 1 0 100%;
justify-content: right;
align-items: stretch;
}
}
Bad
.leftbar-header {
& {
display: flex;
flex: 1 0 100%;
justify-content: right;
align-items: stretch;
}
}
Good
.leftbar-header {
& {
align-items: stretch;
display: flex;
flex: 1 0 100%;
justify-content: right;
}
}
Bad
.leftbar-header {
& {
align-items: stretch;
display: flex;
flex: 1 0 100%;
justify-content: right;
}
}
Bad
// Selectors mobile
.selectors-mobile {
...
Bad
File constants.scss
// -----------------
// Constants
// -----------------
$topbar_media_point_1: 72.5em;
...
Bad
&__website-link-text {
//display: inline-block;
margin-right: .3rem;
}
Bad
.leftbar-menu {
&__submenu {}
&__li {}
&__item {}
&__item_active {}
&__item_red {}
&__item_faded {}
&__item-link {}
}
Good
// Inline comment
/*
Multiline comment,
Used when text string exceeds 80 signs
*/
Bad
/***************************
Common styles
***************************/
Bad
// ---------------
// Page
// ---------------
Good
& {
align-items: stretch;
display: flex;
flex: 1 0 100%;
justify-content: right;
}
Bad
& {
flex: 1 0 100%;
display: flex;
justify-content: right;
align-items: stretch;
}
"Remove unused code"
"Sort attributes alphabetically"
If we need the sorting - we can do it on final step but this will still make the maitanance work inconvenient.