Организация CSS-кода:
избавляемся от головной боли
Андрюша Михайлов
github.com/lolmaus
goo.gl/6IRVOR
hell-o-baby.com
Let the
holy war
begin!
Используйте
CSS-препроцессор
Node: libsass
Ruby: Sass
Вся верстка только через компоненты (БЭМ-блоки)
Только семантические HTML-классы
Boo
rap
tst
Компонент
.mainMenu
.mainMenu-header
.mainMenu-menuItem
.mainMenu-menuItem-icon
.mainMenu-expandButton
mainMenu.sass
Складываем
файлы компонентов в одну папку
в виде плоского списка
Классы-модификаторы
SMACSS
BEM
.main-menu__item-icon--active
.main-menu__item-icon--expanded
.main-menu__item-icon--visible
.is-active
.is-expanded
.is-visible
.mainMenu-itemIcon.-active
.mainMenu-itemIcon.-expanded
.mainMenu-itemIcon.-visible.-expanded
Классы-модификаторы
.foo-bar
color: black
&.-active
color: red
&.-expanded
font-weight: bold
&.-visible
opacity: 1
.foo-bar {
color: black; }
.foo-bar.-active {
color: red; }
.foo-bar.-expanded {
font-weight: bold; }
.foo-bar.-visible {
opacity: 1; }
Классы-модификаторы
Состояние
Разновидность
-active
-visible
-expanded
_home
_services
_pricing
.mainMenu
.mainMenu-item._home
.mainMenu-item._services.-active
.mainMenu-item._pricing
.mainMenu-item._login
.mainMenu-item._signup
Каждый элемент отвечает за:
- свое оформление
- свое положение
в родительском контексте
- за свое оформление
- за компоновку
своего содержимого
Внутренние
свойства
Внешние
свойства
Самодостаточные
- border
- padding
- color
- background
Работающие в контексте родителя
- float
- margin
- top, left и т. д.
- z-index
.foo-bar {
color: red; }
.foo .foo-bar {
float: red; }
?
width
position
vertical-align
.menu
border: 10px
.menu-item
line-height: 18px
font-size: 14px
float: left
.menu
border: 10px
.menu-item
float: left
.menu-item
line-height: 18px
font-size: 14px
"Внешний" стиль элемента
в контексте его родителя
.menu
border: 10px
.menu-item
float: left
.menu-item
line-height: 18px
font-size: 14px
"Внешний" стиль элемента
в контексте его родителя
.menu {
border: 10px; }
.menu .menu-item {
float: left; }
.menu-item {
line-height: 18px;
font-size: 14px; }
.foo
display: table
width: 100%
.foo-bar
display: table-row
.foo-bar
.foo-bar-baz
display: table-cell
.foo-bar-baz
text-align: center
vertical-align: middle
.foo
display: table
width: 100%
.foo-bar
display: table-row
.foo-bar-baz
display: table-cell
text-align: center
vertical-align: middle
.foo
display: table
width: 100%
.foo-bar
display: table-row
.foo-bar
.foo-bar-baz
display: table-cell
.foo-bar-baz
text-align: center
vertical-align: middle
.foo {
display: table;
width: 100%; }
. foo .foo-bar {
display: table-row; }
.foo-bar .foo-bar-baz {
display: table-cell; }
.foo-bar-baz {
text-align: center;
vertical-align: middle; }
.foo
display: table
width: 100%
.foo-bar
display: table-row
.foo-bar-baz
display: table-cell
text-align: center
vertical-align: middle
.foo-bar-baz
background: red
.foo {
display: table;
width: 100%; }
.foo .foo-bar {
display: table-row; }
.foo .foo-bar-baz {
display: table-cell;
text-align: center;
vertical-align: middle; }
Группировка внешних стилей
в общем контексте
.foo-bar-baz {
background: red; }
.foo
display: table
width: 100%
.foo-bar
display: table-row
.foo-bar
.foo-bar-baz
display: table-cell
.foo-bar-baz
text-align: center
vertical-align: middle
Too verbose! :(
Применение внутренних стилей в зависимости от состояния родителя
.foo-baz
font-weight: normal
.foo.-active &
font-weight: bold
.foo-baz {
font-weight: normal; }
.foo.-active .foo-baz {
font-weight: bold; }
.foo
.foo-bar
.foo-baz
.foo-baz-quux._alpha
.foo-baz-quux._beta
.foo-zomg
.foo.-active
.foo-bar
.foo-baz
.foo-baz-quux._alpha
.foo-baz-quux._beta
.foo-zomg
.foo.-active
.foo-bar
.foo-baz.-active
.foo-baz-quux._alpha.-active
.foo-baz-quux._beta.-active
.foo-zomg
.foo.-active
.foo-bar
.foo-baz
.foo-baz-quux._alpha
.foo-baz-quux._beta
.foo-zomg
Внешний стиль
.foo-baz
font-weight: normal
.foo.-active &
font-weight: bold
.foo-baz {
font-weight: normal; }
.foo.-active .foo-baz {
font-weight: bold; }
Внутренний стиль + модификатор
.foo
.foo-baz
width: 10%
.foo-baz
width: 50px
.foo .foo-baz {
width: 10%; }
.foo-baz {
width: 50px; }
А теперь всё вместе! :D
.foo
color: red
.foo-baz
width: 10%
.foo-baz
width: 50px
.foo.-active &
font-weight: bold
.foo {
color: red; }
.foo .foo-baz {
width: 10%; }
.foo-baz {
width: 50px; }
.foo.-active .foo-baz {
font-weight: bold; }
.block
.block-title
.block-content
Оформление компонета в зависимости от родителя
Оформление компонета в зависимости от родителя
Плохо :(
Ненамного лучше :/
.sidebar
.block-title
font-weight: bold
.block-content
border: 5px dashed black
block.sass
.articleList
.block-title
font-family: OpenSans
.block-content
background-color: deepskyblue
articleList.sass
sidebar.sass
.block-title
.sidebar &
font-weight: bold
.articleList &
font-family: OpenSans
.block-content
.sidebar &
border: 5px dashed black
.articleList &
background-color: deepskyblue
Оформление компонета в зависимости от родителя
block/
sidebar.sass
articleList.sass
=block-fancy
.block-title
font-weight: bold
.block-content
border: 5px dashed black
=block-cosmic
.block-title
font-family: OpenSans
.block-content
background-color: deepskyblue
.sidebar
+block-fancy
.articleList
+block-cosmic
block.sass
.block
font-weight: normal
block/block-mixins.sass
Разновидности компонента:
выносим в отдельные файлы
page/
.page._home
background: red
.welcomeMessage
float: left
page.sass
.page
font-weight: normal
page/page-about.sass
.page._about
background: blue
.companyLogo
float: right
page/page-home.sass
goo.gl/6IRVOR
Спасибо! ^_^
Андрюша Михайлов
github.com/lolmaus
hell-o-baby.com