—»     —»   Разработка модульного внешнего интерфейса с помощью LESS
  Раздел: CSS/Style Sheets   Комментариев: 1  

Разработка модульного внешнего интерфейса с помощью LESS

Многие разработчики интерфейсов почти постоянно находятся в поисках путей, которыми можно бы облегчить рабочий процесс, и сделать его более эффективным. Но почему-то редко кто обращает внимание на самого преданного друга – CSS. В данной статье мы расскажем вам о преимуществах эффективной организации кода, которая позволит многократно использовать его в качестве модульной системы.

Разработка модульного внешнего интерфейса с помощью LESS

С приходом сеточных систем и объектно-ориентированного CSS, вся разработка внешних интерфейсов наконец-то сдвинулась с места, с тех пор мы получили замечательные расширения данного языка программирования в виде предварительных обработчиков CSS, которые значительно облегчили сам процесс разработки, и два наиболее известных – это LESS и Sass.

Инструменты для быстрой разработки на CSS

Объектно-ориентированный CSS – это один из самых лучших методов написания кода, который можно использовать практически везде, что позволяет экономить время, требуемое на разработку проектов. Основные принципы ООCSS заключаются в том, что ваш код должен:

* отделять структуру от шаблона. Иметь отдельные классы для определения способа, посредством которого элементы внедряются в шаблон, а также способы их стилизации.
* помогать избежать случаев, когда оформление зависит от расположения элементов. Проект OOCSS от GitHub лучше всего разъясняет данное положение. В нем сказано, что вместо написания .container h2, лучше использовать h2.tagline или что-нибудь другое, что работает семантическим образом. За счет этого можно быть уверенным в том, что все элементы H2 будут выглядеть одинаково.

При написании объектно-ориентированного CSS, важно помнить о том, что вы будете использовать в качестве разметки HTML. Хотя вы можете написать код примерно так:

<div class="blog-post">
<h1>Article title</h1>
<div class="meta">
<p>Date published: <span class="date">12 January 2012</span></p>
</div>
<div class="post-body">
<p>...</p>
</div>
</div>

Лучше будет написать его следующим образом:

<article class="blog-post col_8">
<h1 class="headline">Article title</h1>
<p class="meta-information blog-post-meta">Date published: <time class="blog-date" datetime="2012-01-12">12 January 2012</time></p>
<section class="post-body text">
<p>...</p>
</section>
</article>

И использовать подобный CSS-код:

h1 { ... }
.headline { ... }
.meta-information { ... }
.blog-post-meta { ... }
time { ... }
.blog-date { ... }
.text { ... }
.post-body { ... }

Вместо использования префикса в каждом CSS-правиле с .blog-post. К тому же, это позволяет использовать данный код многократно. Но даже в данном случае все еще могут возникнуть некоторые проблемы: приходится писать достаточно много кода HTML, и все кажется больно сложным, хотя и предназначено всего лишь для простенькой записи в блоге. Здесь нам на помощь приходит LESS и значительно упрощает процесс.

LESS представляет собой предварительный обработчик CSS-кода, который расширяет язык CSS посредством невероятно удобных свойств. С момента внедрения данной технологии, все веб-страницы, можно сказать, оживились. Хотя LESS вмещает в себя огромное множество удобных и полезных свойств, мы хотели бы заострить внимание на 3 из них:

* Переменные. Определяйте любую переменную следующим образом: @color1: #df0290, и далее используйте ее в коде:

.container { background: @color1 url('img/bg_gradient.png'); }

* Mixins. Определяйте удобные функции с или без параметров:

.box (@w: 500px, @h: 200px) {
display: block;
width: @w;
height: @h;
}

после чего используйте в вашем коде ...

.modal-dialog ( .box(400px, 700px); }

* Разветвленные правила. Это, вероятно, самое то, о чем вы мечтали, начиная работать с CSS:

article {
font-family: serif;
line-height: 1.4;
h1 {
font: 2em bold sans-serif;
}
h2 {
font-size: 1.5em;
&.category { color: #666; }
}
}

Знак & ссылается на основное правила. Так что, &.category перенесет статью в h2.category, как только код LESS будет скомпилирован.

Благодаря LESS все то, что нам нужно было сверху, упрощается примерно до:

<article class="blog-post">
<h1>Article title</h1>
<p class="meta">Date published: <time datetime="2012-01-12">12 January 2012</time></p>
<section class="post-body">
<p>...</p>
</section>
</article>

А CSS-код будет следующим:

/* Reusable global styles */
h1 { ... }
.headline { ... }
p { ... }
.meta-information { ... }
.col (@width) { width: 10% * @width; }
.date-published { ... }
.text { ... }

article {
.col(8);
h1 { .headline; }
p.meta {
.meta-information;
time { .date-published; }
}
.post-body { .text; }

&.blog-post {
// perhaps some blog specific rules here?
}
}

Необходимость организации в CSS

Тем не менее, вышеприведенный пример очень простой. Потребность в организации CSS-кода кажется неизбежной, как только вы столкнетесь с каким-либо серьезным крупным веб-проектом, где используются очень объемные файлы таблиц стилей. Одно и то же диалоговое окно или один и тот же элемент могут выглядеть абсолютно по-разному в разных областях, и ведь не нужно для этого заново прописывать все правило? Мы можем просто использовать комбинацию LESS и OOCSS для того, чтобы добиться нужного оформления.

Одно из преимуществ организации кода заключается в том, что вы можете разделить различные функции дизайна. Руководствуясь этим, вы можете создавать CSS (либо в нашем случае это LESS) библиотеки, которые выглядят следующим образом:

/project/css/
- reset.css — сброс исходных настроек браузера
- grid.less — поддержка mixin’ов для сеточной системы, как например, Mixin .col(@width), о котором мы упоминали ранее
- type.less — поддержка mixin’ов для стилизации шрифтов, а также правил @font-face
- colorscheme.less — LESS-переменные для различных цветов в дизайне
- interface.less — mixin’ы для функций интерфейса (кнопки, формы, диалоговые окна)
- layout.less — верстка дизайна сайта
- style.less — основная таблица стилей, включающая всё вышеприведенное и дополненная любыми стилями, необходимыми для конкретного сайта

Подобный уровень организации, конечно же, слишком громоздкий для небольших веб-страниц, либо для приложений на одну страницу, но и недостаточно велик для серьезных объемных проектов со множеством различающихся страниц. Для больших в объеме проектов, вам, вероятно, также понадобятся специальные стили, предназначенные для отдельных страниц или функций, типа search.less или profile_page.less.

Кстати, вам следует быть осторожными при загрузке большого количества LESS-файлов. Для того чтобы внедрить код LESS, старайтесь придерживаться следующих правил:

* Старайтесь всегда прописывать опрятный код CSS. В процессе разработки старайтесь прописывать всё, как следует. Не старайтесь где-то что-то сократить. За это вы даже будете благодарны позже.
* В LESS используйте комментирование посредством //, вместо /* */, так как они удаляются компилятором LESS.
* Всегда применяйте mixin’ы для параметров. Даже когда ваши mixin’ы в LESS не имеют переменных, включайте их с пустыми скобками, например вот так: .border () { border: 1px solid black; }. Это позволит вам быть уверенными в том, что mixin’ы в LESS не будут включены в компилирующийся код.
* Компилируйте код LESS, а затем минимизируйте его посредством CSS minifier. В LESS имеется собственный компилятор, написанный для node.js. А также имеется PHP-компилятор (и даже онлайн-демо данного компилятора). В сети пишут, что при работе PHP LESS-компилятора можно столкнуться с какими-то проблемами и ошибками, но у нас такого не случалось.

Разработка стилистических библиотек для ускорения процесса разработки внешних интерфейсов

Основное преимущество, которым вы можете воспользоваться в процессе разработки, заключается в том, чтобы применять уже ранее написанный код несколько раз. Если вы работаете над веб-приложением, не стесняйтесь начать с Bootstrap – она предоставит вам многое из того, что вы уже писали. К тому же, это одна из самых объемных CSS-платформ, которая, кстати, написана на LESS!

Другие платформы LESS, на которые вам следовало бы обратить внимание, называются Preboot и Elements – обе предлагают очень удобные mixin’ы.

Но в зависимости от типа работы, которую вы выполняете, лучшим способом создания собственной библиотеки будет написание собственного кода. Для того чтобы сделать его максимально эффективным, попробуйте обыграть каждую строчку LESS-кода так, чтобы она была применима в нескольких контекстах, а затем сохраните все варианты «на потом». Очевидно, что вам вряд ли удастся сделать каждую строку полностью независимой от контекста, но чем больше кода вы пишите, тем удобнее его будет использовать в нескольких проектах, тем дольше он будет сохраняться в LESS Mixin.

Другая стратегия заключается в применении шаблонов LESS, так как стилизация веб-сайта таким образом проходит значительно быстрее. Ведь вы работаете в уже привычной вам среде. Давайте рассмотрим на стратегию на примере colorscheme.less:

@background:         #ffffff;
@textcolor:         #252525;
@textcolor-strong:    #090909;
@textcolor-em:        #666666;
@textcolor-blockquote:    #aaaaaa;

@accent1:        #2d9681;
@accent2:        #f8a34b;

@warning:        #d4230f;

И так далее. Используя подобный шаблон для каждого проекта, вы усваиваете имена переменных, и далее можете без труда быстро создавать таблицы стилей без необходимости думать о цветах, что дает вам возможность направить больше ресурсов мозга на разработку функций каждого элемента. То же самое можно сказать и о типографике. Если вы определили @font-headline в вашем фале type.less, вы можете использовать его в элементах H1 или H2 без раздумий о том, какой именно шрифт вам требуется.

И весь рабочий процесс протекает без последующих изменений цветов, шрифтов и других ключевых элементов в дизайне сайта. Все становится значительно проще и сосредоточеннее.

План

Вероятно, будет достаточно сложно запомнить все важные аспекты, упомянутые выше, но все вышесказанное можно «утрамбовать» в два основных правила:

Абстракция и консистенция. Держите ваш код в модульном виде, чтобы иметь возможность использовать его где угодно. Используйте текстуры так, чтобы вы могли запомнить их. Отделяйте функции от стилей, а детали от общей идеи. Не используйте код, зависимый от расположения до того момента, когда вам действительно придется сделать это.

Организуйте всё! Не просто пишите код с возможностью повторного использования – сохраняйте его! В директориях с вашими веб-проектами у вас должна быть еще одна директория, в которой вы сможете хранить код с возможностью повторного использования, который также будет включать чужие наработки, как например, Twitter Bootstrap и LESS Elements.

Следуя данным правилам, вы сможете создать стандартизированную библиотеку кода LESS, которая поможет вам значительно сократить временные затраты на разработку. После того, как вам больше не придется думать об основном функционале и стилизации веб-сайта, вы сможете сконцентрировать внимание на самом главном для конечного пользователя – на том, как все выглядит.

Источники изображений:

* Абстрактное векторное изображение было предоставлено Vectorportal.com
* Логотип LESS был представлен проектом LESS
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 13695   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 февраля 2014 @ 05:10
Написал: Валерий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я предлагаю следующий метод создания целой серии шаблонов без программирования. Сделать один CSS шаблон (или взять где-то готовый). Далее переименовать его в * .less
Затем все (или большинство) констант (100px, #674578, blue) заменить переменными (@width_left, @bacgroundcolor_rigth, @textcolo_content). Одновременно в начале less файла прописать @width_left: 100px; @bacgroundcolor_rigth: #674578; @textcolo_content: blue;
Тогда в процессе компиляции (допустим Crunch) мы получим тот же файл css. Но меняя параметры (цвета, размеры и т. д.), получим целый ряд различных шаблонов. Для подборки гармоничных цветов в интернете также имеется уйма программ. Мне такая технология сэкономила много времени, и результат меня вполне удовлетворил.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Сип панели цена
От производителей и поставщиков. Цены. Фото. Описания. Покупай
varma-ekb.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
рунетки
Новый бесплатный чатрулет
rus.fapcams.club
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031