Типичные проблемы
• Забудьте о масштабируемости
• Бардак в структуре
• Повторяющийся код
• Лишние и неиспользуемые стили
• !
i
m
p
o
r
t
a
n
t сплошь и рядом
• ...
2
Slide 7
Slide 7 text
Scalable and Modular Architecture for CSS
pronounced “smacks”
Slide 8
Slide 8 text
Jonathan Snook
Slide 9
Slide 9 text
Принципы
Slide 10
Slide 10 text
Rules
• Base
• Layout
• Module
• State
• Theme*
6
Slide 11
Slide 11 text
Base
Slide 12
Slide 12 text
Base
• reset.css
• normalize.css
• Вендоры
• Стили для простых тегов
8
Slide 13
Slide 13 text
Base
b
o
d
y {
m
a
r
g
i
n
: 0
;
p
a
d
d
i
n
g
: 0
;
}
a {
c
o
l
o
r
: b
l
a
c
k
;
}
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
9
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Layout
Slide 16
Slide 16 text
Layout
• Major
• Minor
11
Slide 17
Slide 17 text
Major
• Header
• Footer
• Sidebar
• ...
Tip > Единственные на странице, "l-" префикс
12
Slide 18
Slide 18 text
Minor
• Forms
• Buttons
• Nav menu
• ...
13
Slide 19
Slide 19 text
Layout (Major)
<
b
o
d
y c
l
a
s
s
=
"
l
-
f
l
u
i
d
-
l
a
y
o
u
t
"
>
14
Slide 20
Slide 20 text
Module
Slide 21
Slide 21 text
Module
<
a
s
i
d
e i
d
=
"
s
i
d
e
b
a
r
"
>
<
u
l c
l
a
s
s
=
"
l
-
s
i
d
e
b
a
r
-
l
i
s
t
"
>
<
l
i
>
<
h
2
>
T
i
t
l
e
<
/
h
2
>
<
p
>
t
e
x
t
<
/
p
>
<
/
l
i
>
<
/
u
l
>
<
/
a
s
i
d
e
>
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
0
8
.
16
Slide 22
Slide 22 text
Module
<
u
l c
l
a
s
s
=
"
l
-
s
i
d
e
b
a
r
-
l
i
s
t
"
>
<
l
i c
l
a
s
s
=
"
s
i
d
e
b
a
r
-
i
t
e
m"
>
<
h
2 c
l
a
s
s
=
"
i
t
e
m
-
t
i
t
l
e i
t
e
m
-
t
i
t
l
e
-
n
o
r
m
a
l"
>
T
i
t
l
e
<
/
h
2
>
<
p
>
t
e
x
t
<
/
p
>
<
/
l
i
>
<
/
u
l
>
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
17
Slide 23
Slide 23 text
Module (css)
.
s
i
d
e
b
a
r
-
i
t
e
m {
}
.
s
i
d
e
b
a
r
-
i
t
e
m
-
t
i
t
l
e {
}
.
s
i
d
e
b
a
r
-
i
t
e
m
-
n
o
r
m
a
l {
}
Tip > Независимость от структуры
0
1
.
0
2
.
0
3
.
18
State
<
d
i
v c
l
a
s
s
=
"
m
e
s
s
a
g
e i
s
-
w
a
r
n
i
n
g"
>
M
e
s
s
a
g
e t
e
x
t
<
/
d
i
v
>
Tip > Взаимодействие с js
0
1
.
0
2
.
0
3
.
21
Slide 27
Slide 27 text
Theme
Slide 28
Slide 28 text
Theme
<
l
i
n
k r
e
l
=
"
s
t
y
l
e
s
h
e
e
t
" h
r
e
f
=
"
s
t
y
l
e
.
c
s
s
"
>
<
l
i
n
k r
e
l
=
"
s
t
y
l
e
s
h
e
e
t
" h
r
e
f
=
"t
h
e
m
e
.
c
s
s"
>
Tip > Перезапись
0
1
.
0
2
.
23
Slide 29
Slide 29 text
Theme
<
d
i
v c
l
a
s
s
=
"
s
o
r
t
i
n
g
-
w
i
d
g
e
t t
h
e
m
e
-
s
o
r
t
i
n
g"
>
c
o
n
t
e
n
t
<
/
d
i
v
>
0
1
.
0
2
.
0
3
.
24
Slide 30
Slide 30 text
/
* s
t
y
l
e
.
c
s
s *
/
.
s
o
r
t
i
n
g
-
w
i
d
g
e
t {
c
o
l
o
r
: r
e
d
;
}
/
* t
h
e
m
e
.
c
s
s *
/
.
t
h
e
m
e
-
s
o
r
t
i
n
g {
c
o
l
o
r
: y
e
l
l
o
w;
}
0
1
.
0
2
.
0
3
.
0
4
.
0
1
.
0
2
.
0
3
.
0
4
.
25
Slide 31
Slide 31 text
Улучшения
• Минимизация селекторов
• #
s
i
d
e
b
a
r d
i
v u
l > .class > ul || .list
• Использование препроцессоров
• SASS, LESS, Stylus, ...
• Работает с любым html (4,5)
• Дополнительные уровни семантики
• Уменьшение специфичности структуры
26
Slide 32
Slide 32 text
Это винтик, это отвертка, винтик можно крутить отверткой.
Это всякие железяки, их можно соединять винтиками, закрутив
отверткой.
Еще бывают гайки и шестеренки.
Задание: Постройте синхрофазотрон.
“
Структура (2/components/article)
• extends.scss
• mixins.scss
• variables.scss
32
Slide 38
Slide 38 text
Структура (style.scss)
/
/ s
o
m
e s
e
t
t
i
n
g
s
@
i
m
p
o
r
t "
c
o
m
p
a
s
s
/
r
e
s
e
t
"
;
@
i
m
p
o
r
t "
c
o
m
p
a
s
s
"
;
@
i
m
p
o
r
t "c
o
m
p
o
n
e
n
t
s
/
a
r
t
i
c
l
e"
;
0
1
.
0
2
.
0
3
.
0
4
.
33