1. LESS and even more!

2. LESS and even more!

3. Код стилей:
● Понятный
● Гибкий
● Разбит на файлы небольшого
размера

5. SMACSS
Scalable and Modular Architecture for CSS
by Jonathan Snook

6. Категории стилей
1. Base
2. Layout
3. Module
4. State
5. Theme

7. 1. Base
html, body {...}
input[type=text] {...}
a {...}
a:hover {...}
p > span {...}
span + span {...}
- reset.css

8. 2. Layout
#header, #footer {...}
#sidebar-first, #sidebar-second {...}
#content {...}
.l-fixed #sidebar-first { width: 200px; }
.l-fluid #sidebar-first { width: 20%; }

9. 3. Module
.menu {
border: 1px solid #ccc;
}
.menu > h2 {
padding: 5px;
}
.menu li {
padding: 5px;
}
.menu {
border: 1px solid #ccc;
}
.menu-header {
padding: 5px;
}
.menu-item {
padding: 5px;
}

10. Sub-modules
.menu {
border: 1px solid #ccc;
}
.menu-item {
padding: 5px;
}
.menu-horizontal .menu-item {
display: inline-block;
}

11. 4. State
#header.is-sticky {
position: fixed;
top: 0;
}
.menu.is-collapsed > h2 {
text-decoration: underline;
}

12. Изменение состояния
● класс
● псевдо-класс
● media query
● атрибут
.menu.is-collapsed {...}
a:hover {...}
@media screen and (max-width: 400px) {...}
.button[data-state=pressed] {...}

13. 5. Theme
/* in module-name.css */
.mod {
border: 1px solid;
}
/* in theme.css */
.mod {
border-color: blue;
}
/* in theme.css */
.theme-border {
border-color: purple;
}
.theme-background {
background: linear-gradient( ... );
}

14. ● используйте классы
● избегайте селекторов с
идентификаторами
● избегайте селекторов по элементам
● избегайте большой вложенности в
селекторах
● используйте префиксы в классах

15. Структура файлов
● выносите базовые стили в отдельный файл
● в зависимости от типов layout-ов, выносите их в
отдельный файл или каждый основной тип в отдельный
файл
● выносите каждый модуль в отдельный файл
● в зависимости от размера проекта, выносите подмодули
в отдельные файлы
● выносите глобальные состояния в отдельный файл
● выносите layout-ы и состояния, относящиеся к модулю, в
том числе media queries, в файл модуля

16. Sass

17. Переменные
$fontSize: 16px;
$lineHeight: normal;
$fontColor: #000;
.element {
font-size: $fontSize;
line-height: $lineHeight;
color: $fontColor;
}
$black: #000;
$fontColor: $black;
.element {
color: $fontColor;
}
.scss
.element {
font-size: 16px;
line-height: normal;
color: black;
}
.element {
color: black;
}
.css

18. Переменные
$borderWidth: 1px;
$borderStyle: solid;
$borderColor: #ccc;
$border: $borderWidth $borderStyle $borderColor;
.element-1 {
border: $border;
}
.element-2 {
border: $borderWidth $borderStyle $borderColor;
}
.element-1 {
border: 1px solid #cccccc;
}
.element-2 {
border: 1px solid #cccccc;
}
.scss .css

19. Вложенные правила
.menu {
a {
color: #0000cc;
&:hover {
text-decoration: underline;
}
&.active {
color: #cc0000;
}
}
}
.scss
.menu a {
color: #0000cc;
}
.menu a:hover {
text-decoration: underline;
}
.menu a.active {
color: #cc0000;
}
.css

20. Миксины (Mixins)
@mixin link {
color: #0000cc;
&:hover {
text-decoration: underline;
}
}
a {
@include link;
}
.scss
a {
color: #0000cc;
}
a:hover {
text-decoration: underline;
}
.css

21. Миксины
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
.rounded {
@include border-radius(5px);
}
.scss
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.css

22. Миксины
@mixin fixed-size($width: 100px, $height: 100px) {
width: $width;
height: $height;
}
.box-1 {
@include fixed-size;
}
.box-2 {
@include fixed-size(150px, 200px);
}
.scss
.box-1 {
width: 100px;
height: 100px;
}
.box-2 {
width: 150px;
height: 200px;
}
.css

23. Расширения
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
.scss
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion, .intrusion.seriousError {
background-image: url("/image/hacked.png");
}
.seriousError {
border-width: 3px;
}
.css

24. Расширения
a:hover {
text-decoration: underline;
}
.hoverlink {
@extend a:hover;
}
.scss
a:hover, .hoverlink {
text-decoration: underline;
}
.css

25. Математические
выражения и функции
$baseFontSize: 16px;
$color: #999;
$elementOuterWidth: 300px;
$elementLeftRightPadding: 20px;
.element {
padding: 0 $elementLeftRightPadding;
width: $elementOuterWidth -
$elementLeftRightPadding * 2;
font-size: $baseFontSize + 2;
color: $color + #000033;
}
.title {
font-size: $baseFontSize * 1.5;
}
.scss
.element {
padding: 0 20px;
width: 260px;
font-size: 18px;
color: #9999cc;
}
.title {
font-size: 24px;
}
.css

26. Математические
выражения и функции
$colNumber: 3;
.col {
width: floor(100% / $colNumber);
}
.col.last {
width: 100% - floor(100% / $colNumber) *
($colNumber - 1);
}
$contentWidth: 960px;
$colPaddingLeftRight: 20px;
.another-col {
width: floor(($contentWidth / $colNumber) - 2 *
$colPaddingLeftRight);
}
.scss
.col {
width: 33%;
}
.col.last {
width: 34%;
}
.another-col {
width: 280px;
}
.css

27. Функции работы с
цветами
$linkColor: #0000ff;
$buttonColor: #b83000;
a {
color: $linkColor;
&:hover {
color: lighten($linkColor, 10%);
}
}
.button {
background-color: $buttonColor;
&:hover {
background-color: darken($buttonColor, 10%);
}
}
.scss
a {
color: blue;
}
a:hover {
color: #3333ff;
}
.button {
background-color: #b83000;
}
.button:hover {
background-color: #852300;
}
.css

28. Директива @import
.element-1 {
display: block;
float: left;
}
element-1.scss
.element-1 {
display: block;
float: left;
}
.element-2 {
display: inline-block;
border: 1px solid #999;
}
main.css
.element-2 {
display: inline-block;
border: 1px solid #999;
}
element-2.scss
@import "element-1.scss";
@import "element-2";
main.scss

30. + Zen Grids

31. Omega
(7.x-4.x)

33. /* main.scss */
@import
"variables",
"mixins",
"base/import",
"layout/import",
"components/import";

34. Полезные ссылки
google.com

35. Полезные ссылки
● CSS coding standards https://drupal.org/node/1886770
● SMACSS http://smacss.com/
● Sass http://sass-lang.com/
● Compass http://compass-style.org/
● Zen https://drupal.org/project/zen
● Omega https://drupal.org/project/omega
● AdaptiveTheme https://drupal.org/project/adaptivetheme

36. Спасибо за
внимание!