Илья Андриенко: Вёрстка в проекте глазами “неверстальщика”

Верстка в проекте глазами
“неверстальщика”
Андриенко Илья, DataArt

“I am wondering, why are you here? Hmm?”

Основная цель этого доклада:
Предотвратить возможную катастрофу в будущем

CSS-препроцессоры

Популярны в среде фреймворков
.. и многие другие

• Родом из 2009 года.
• CSS => LESS => CSS
• Написан на JavaScript (NodeJS)

Переменные как возможность повторяться
@background_color: #ffffff;
@foreground_color: #000000;
.content{
background: @background_color;
color: @foreground_color;
}
.footer{
background: @foreground_color;
color: @background_color;
}
.content {
background: #ffffff;
color: #000000;
}
.footer {
background: #000000;
color: #ffffff;
}

Примеси как возможность не повторяться
.get_rid_of_text(){
text-indent: -9999px;
white-space: nowrap;
overflow: hidden;
}
.logo_header{
width: 200px;
height: 50px;
background: url("logo.png") no-repeat;
.get_rid_of_text();
}
.logo_footer{
width: 75px;
height: 50px;
background: url("logo-foot.png") no-repeat;
.get_rid_of_text();
}
.logo_header {
width: 200px;
height: 50px;
background: url("logo.png") no-repeat;
overflow: hidden;
}
.logo_footer {
width: 75px;
height: 50px;
background: url("logo-foot.png") no-repeat;
overflow: hidden;
}

Вложенность или возможность писать стройные
таблицы
.parent{
background:#ff0;
.child{
background: #0f0;
}
}
.parent{
background: #ff0;
}
.parent .child {
background: #0f0;
}

Включения – коллективная работа
@import "style";
@import "layout";
/* Layout */
.content{
width: 80%;
margin: auto;
}
.footer{
height: 200px;
}
/* Styles */
.content{
color:#ff0;
background: #000;
}
.footer{
background: #000;
color:#f00;
}
/* Styles */
.content{
color: #ff0;
background: #000;
}
.footer{
background: #000;
color: #f00;
}
/* Layout */
.content{
width: 80%;
margin: auto;
}
.footer{
height: 200px;
}

Проблема:
не вся команда готова
использовать,
а правки в верстку
вносить приходится
всем
(не дёргать же
верстальщика по
мелочам)

Хорошая верстка
(с препроцессором)
CSS-результат
Глазами фронтендщика

Глазами бекендщика
Большой уродливый CSS-файл

Глазами бекендщика
Большой уродливый CSS-файлМаленькие правки
(с правками)

Хорошая верстка
(с препроцессором)
CSS-результат
Глазами фронтендщика
(с правками)

Мелкие правки бекендщика затёрли.

Илья Андриенко: Вёрстка в проекте глазами “неверстальщика”

Причины
•Тяжело настраивать
•Страх дебага
•Лень собирать

Настройка и установка
Особенно актуальна эта проблема для пользователей Windows.
Люди не хотят ставить Node или Ruby только для работы с версткой
Решения проблемы
• Курить маны и ставить
• Скачать велосипед (их десятки)
• Портативная версия компилятора
Например, http://tinyurl.com/tools-css

Проблема с дебагом:
Трудно понять, откуда взялась
та или иная строка.

• Вотчеры в IDE.
• Родные вотчеры процессоров
• Планировщики задач
(сборка на сервере)
Спасение от лени

Резюмируя:
• Можно добавить в вёрстку программистскую логику
• Можно не пользоваться и толком, но быть готовы должны
все
• Попробуйте! Это не больно :P (http://tinyurl.com/tools-css)

Всем спасибо!
http://tinyurl.com/pugdnepr
ilia.andrienko
ilya.andriyenko@dataart.com
Контакты автора
Имеет смысл вступить:

Илья Андриенко: Вёрстка в проекте глазами “неверстальщика”

More Related Content

More from Oleg Poludnenko (9)

Илья Андриенко: Вёрстка в проекте глазами “неверстальщика”