rreblogger (rreblogger) wrote,
rreblogger
rreblogger

Навыки CSS

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

И чтобы всякий раз при работе с CSS оставаться в здравом уме и трезвой памяти, придерживайтесь четырех базовых принципов: используйте правильную семантику, не забывайте про модуляризацию, выбирайте подходящие правила именования и следуйте единому принципу ответственности.




Рекомендуется к прочтению -  Как стать героем фронтенд-разработки с нуля (часть 1)

Использование правильной семантики

В HTML и CSS была придумана концепция семантической разметки. Семантика указывает на смысловое значение слов и их связи. В части HTML это означает использование правильных тегов разметки. Вот вам классический пример:



<!-- плохой пример -->
<div class=”footer”></div>
<!-- хороший пример -->
<footer></footer>

Семантика в HTML предельно проста и однозначна. А в CSS она, наоборот, более абстрактна и субъективна. Написание CSS семантики заключается в выборе имен класса, отражающих их структурное значение и функции. Придумайте легкое для понимания имя класса. Убедитесь, что это имя не слишком специфично. Так вы сможете многократно использовать заданные классы.

Для наглядной иллюстрации семантически правильных имен класса ниже приводится упрощенный пример CSS в Medium.



<div class="stream">
    <div class="streamItem">
       <article class="postArticle">
         <div class="postArticle-content">
           <!-- content -->
         </div>
       </article>
      </div>
</div>

Из кода сразу становится понятной структура класса, его роль и значение. Родительский класс stream представлен списком статей. Класс-потомок streamItem включает в себя конкретную статью из списка. Связь предка и потомка предельно понятна. Более того, эти классы используются на каждой странице со статьями.

Вы должны уметь читать HTML и CSS как книгу, рассказывающую какую-либо историю. История состоит из персонажей и отношений между ними. Чем больше семантики у вашего CSS , тем надежнее код вы получите на выходе.

Для дальнейшего изучения данной темы почитайте Какую семантику задать для имен класса, Именование в CSS – штука не из легких и Семантика и чувствительность. Ну а если хочется чего-то более фундаментального, то Об HTML семантике и фронтенд-архитектуре вам в помощь.



А такжеЧему мы можем научиться у инженеров роста

Модуляризация

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


Каждая обведенная область представляет собой компонент. В стриме (stream ) есть много элементов стрима ( stream items ).



<div class="stream">
     <div class="streamItem">
       <!-- информация о продукте -->
     </div>
</div>

Львиную долю этих компонентов можно поделить на еще меньшие части.

Каждый элемент стрима (stream item ) содержит в себе превью (thumbnail ) и информацию о конкретном продукте.



<!-- КОМПОНЕНТ СТРИМА -->
<div class="stream">
    <div class="streamItem">
      <!-- POST-компонент -->
      <div class="post">
        <img src="thumbnail.png" class="postThumbnail"/>
        <div class="content">
          <!-- информация о продукте -->
        </div>
      </div>
    </div>
</div>

А поскольку компонент stream не зависит от потомков (которые, в свою очередь, также не зависят от родителя), то можно с легкостью изменять или исключать класс post без внесения каких-либо существенных корректировок в класс stream.

Умение мыслить компонентами поможет вам с сопряженностью кода. Чем более сопряжен ваш код, тем ниже взаимозависимость между заданными классами. Такой код легко редактируется, и дальнейшая работа с ним существенно упрощается.


Компонентный дизайн

Модуляризацию CSS начинайте с разбивки дизайн-шаблона на компоненты. Это можно сделать как вручную карандашом на бумаге, так и с помощью программ Illustrator или Sketch. Вычленение компонентов поможет вам понять, как следует назвать ваши классы, и каким образом они связаны между собой.

Более подробно о компонентном подходе в CSS написано в CSS архитектура: масштабируемый и модульный подходы, Написание модульного CSS в Sass и Модуляризация фронтенд-кода для дальнейшей надежности и работоспособности.

Выбор правила именования

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

Вот небольшой перечень часто используемых правил именования:

Лично я больше всего люблю БЭМ. БЭМ – это сокращение от «блок, элемент, модификатор». Yandex – российский аналог Google – придумал БЭМ с целью решения своих проблем с CSS-кодом.

БЭМ – одно из самых простых, но в то же время наиболее точных и строгих правил именования.



.block { }
.block__element { }
.block--modifier { }

Блоки представляют собой более высокие уровни классов. Элементы являются потомками блоков. Модификаторы – это различные состояния объектов.



<div class="search">
   <input type="search__btn search__btn--active" />
</div>

В примере выше класс search является блоком, а кнопка поиска (search button ) становится его элементом. Если мы хотим изменить поведение кнопки, то тогда нужно добавить модификатор active.

В правилах именования важно запомнить то, что очень часто, вне зависимости от своих личных предпочтений, вам придется иметь дело с базами кода, написанными по другим стандартам. Мысленно настраивайтесь на изучение новых стандартов и альтернативных способов мышления в CSS.

Подробная информация о БЭМ находится здесь: Разбираемся в БЭМ-синтаксисе, БЭМ 101 и Введение в БЭМ. Для общего развития почитайте OOCSS, ACSS, БЭМ, SMACSS – что это такое? И как правильно выбрать?

Следуйте единому принципу ответственности

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

Применимо к CSS под едиными принципами ответственности следует понимать то, что части кода, классы и модули должны выполнять какую-то одну функцию. С точки зрения организации CSS‑файла, это означает, что автономные компоненты (карусели, панели навигации и проч.) следует выносить в отдельные CSS-файлы.

/components

   |- carousel

   |- |- carousel.css

   |- |- carousel.partial.html

   |- |- carousel.js

   |- nav

   |- |- nav.css |- |- nav.partial.html

   |- |- nav.js

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

Разделять по принципу единой ответственности следует не только стили компонентов, но и глобальный стиль.

/base

  |- application.css

  |- typography.css

  |- colors.css

  |- grid.css

Тут каждый стиль выносится в отдельный файл. Таким образом, если вам потребуется изменить цвета, то вы без труда сможете обратиться к нужному файлу.

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

Подробнее файловая структура и CSS‑архитектура описана в Эстетичный Sass 1: Архитектура и организация стилей и Масштабируемая и надежная CSS-архитектура.

Если принцип единой ответственности распространяется на какие-то отдельные CSS-классы, то каждый из таких классов должен наделяться только одной функцией. Иначе говоря, разделите стили на различные классы в зависимости от их назначений. Вот вам классический пример:



.splash {
    background: #f2f2f2;
    color: #fffff;
    margin: 20px;
    padding: 30px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

В примере выше мы собираем всевозможные параметры в одну кучу. Класс splash не просто включает в себя визуальное представление и логику личных стилей, но и затрагивает аналогичные параметры у своих потомков. Для того чтобы избежать этого, нам следует разделить код на два отдельных класса.



.splash {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


.splash__content {
    background: #f2f2f2;
    color: #fffff;
    padding: 30px;
    border-radius: 4px;
 }

Теперь у нас есть классы splash и splash content. И мы можем использовать splash в качестве полнокровного класса, у которого могут быть любые потомки. Все признаки потомков (в нашем случае это splash content ) отделены от родителя.

Более подробно о применении принципа единой ответственности в стилях и классах вы можете почитать в Принцип единой ответственности применительно к CSS и Единая ответственность.

Просто о сложном

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



РекомендуемКак найти время, чтобы стать первоклассным разработчиком

Источник


Tags: программирование HTML
Subscribe

Recent Posts from This Journal

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic
  • 0 comments