Hello, Developers!! Сегодня я расскажу о новой методологии для CSS, которая поможет вам сэкономить время на чтение и редактирование CSS-файлов. Методологию я придумал сам, если будут какие-то идеи, как улучшить её, буду рад обсудить это с вами в комментариях. Давайте же начнем.

Что такое FBCSS, и зачем он нужен ?

FBCSS (Factor and Block CSS) - методология, представляющая собой разделение css-свойств по факторам (каким-то отличительным признакам) и блокам (кускам кода).

Методология разрабатывалась для улучшения читабельности CSS кода. Думаю, ни для кого не секрет, что в CSS-файлах число строк может пробивать отметку в 1000. Представьте, что вам на работе доверили работать с этим CSS-файлом, вы заходите в файл и видите "месево" из символов... Жутко работать с таким, правда ? Некоторые могут сказать, что не всегда все так плохо и не всегда CSS-файл - "каша" символов. И они будут правы, не всегда, но даже если какая-то минимальная стилистика в написании кода и соблюдается, то поискнужных элементов или ни как не отсортированные свойства могут затруднить работу.

Цели, стоящии при создании FBCSS

Я считаю, что методологии в HTML и CSS должны быть понятны и ребенку с полуслова. Читабельный код - залог здоровых глаз senior-разработчика. Когда вы отпровляете на review нечитабельный код, где-то со стула падает один senior. Новичок - человек, который не особо думает о том, насколько его код чистый и читабельный, перед ним просто стоит другая цель - научиться программировать (и я не только о написании кода). Если вы опытный разработчик, то вспомните, что вас волновало больше, когда вы начинали программировать: написать читабельный и красивый код или разобраться в том, как работает то, что вы только что изучили ? Я отношусь ко вторым, думаю, и ты мой дорогой читатель тоже. Проста методологии, по мои предположениям, должна заставить новичков изучить её и применять на практике.

Также, я хотел, чтобы можно было одновременно использоватьи FBCSS и BEM. BEM - одна из крупных (если не самая крупная) методология, применяемая в HTML и CSS, и связка FBCSS и BEM могла бы стать основой, на которой зиждятся многие сайты мира. Так как стоит задача дать возможность интегрировать BEM, то нельзы трогать названия селекторов элементов. Врочем, в этом нет необходимости. FBCSS - о структуре CSS-файла, а не о корректных названиях для элементов.

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

Подведем итог, цели FBCSS:

1. Создание простой методологии для CSS

2. Дать возможность интеграции с BEM

3. Сделать код многих новичков чище

Основные понятия в FBCSS

Перед тем как погружать с головой в практические примеры и способы применения нужно разобраться с терминологией.

Как уже и было сказано ранее, код в FBCSS разделяется по принципу факторов и блоков.

Факторы (Factors) - типы свойств, характеризующих элементы. Звучит запутанно, но приведу пример:

Пусть у нас есть некий элемент с классом container, какие у него могут быть стили ? Назначим ему ширину, высоту, внутренние и внешние отступы, обводку и несколько flexbox-свойств.

Как можно написать код, не пользуясь FBCSS:

.container {
  width: 300px;
  height: 200px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  border: 1px solid #cdcdccd;
  row-gap: 30px;
  margin: 30px;
}

Согласитесь, выглядит довольно громоздно.

Как можно написать этот же код, пользуясь FBCSS:

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #cdcdccd;

  margin: 30px;
  padding: 50px;
  
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

Уже лучше, правда ?

Как вы видите, я разделил список всех стилей на несколько кусков, используя enter. Я разбил по принципу факторов. Возьмем, к примеру, первый кусок. Это форм-фактор - факторы, влияющие на внешний вид элемента. Сюда относяться все факторы, которые могут быть применены ко всем элементам (например, color не относиться к форм-факторм, потому что может быть применён только к текстовой информации, в отличии от width или height).

FBCSS включает в себя такие типы факторов как:

1. webkit-фактор - css-свойства, начинающиеся на -webkit. Они не подразделяются на отдельный факторы, в отличии от других свойств, так как их разделение уменьшит читабельность

2. shape-фактор - css-свойства, визуально изменяющие элемент (важно, сюда относяться все свойства, которые могут быть применены к любому элементу)

3. display-фактор - css-свойста,относящиеся к конкретным значениям одноименного свойства display (например, row-gap, grid-template-columns, flex-wrap)

4. position-фактор - css-свойства, которые изменяют положение элемента в пространстве по осям OX и OY (например, position, top, left)

5. specific-фактор - css-свойства, относящиеся к отжельным элементам или типам элементов (к примеру, color, font-size, text-stroke)

6. indent-фактор - отступы (padding, margin)

7. other-факторы - все другие свойства, которые сложно отнести к какой-либо из вышеупомянутых категорий или сложно сгруппировать в одну новую (например, z-index)

С типами факторов мы познакомились, то и это ещё не все, у них есть "приоритетность" - порядок, в котором их стоит писать. Очередность выглядит так (первый фактор нужно указывать в качестве первого куска кода, последний - последнего):

1. position-фактор

2. display-фактор

3. shape-фактор

4. specific-фактор

5. indent-фактор

6. other-фактр

7. webkit-фактор

Порядок обусловен несколькими вещами: привычкой большенства и линеного чтения информации. Писать слово positoin в начале стилей к элементу - традиция любого верстальщика, и, чтобы не нарушать обычай, я решил поставить этот фактор на первое место. Дальше распредеоение идет согласно линейному чтения. Сначало мы указываем display-факторы, тем самым размещая элементы в нужном порядке, затем придем им form-факоры, которые создают некий "шаблон", назначаем свойста, присущие только конкретным элементам, завершая визуальные изменения (это specific-фактор), проставляем отступы между элементами (приоритет при загрузке стилей отдается внешнему оформлению, а не отсутупам, и, если у пользователя плохое соединение, сначала он увидит то, как выглядит элемент, а не отступы, что, безусловно, гараздо более важно). На последок я оставил свойства, не относящиеся к остальным категориям, так как приоритет их загрузки (не всегда, иногда бывает наоборот) гараздо меньше, чем у факторов, чтоящих выше в списке. И в самом нижу табоицы-приоритетов располагается webkit-фактор. Это свойства, обеспечивающие кроссбраузерность сайта, но они располагаются в конце, так как большенство ствойств адаптивны даже под самые старый браузеры и очень редко используются webkit-факторы (на своей практике не встречал ещё).

С факторами закончим. Теперь очередь блоков.

Блок (Blocks) - кусок кода, отделенный от остальной части CSS-файла по принципу "модульности". Иными словами каждый блок отвечает за что-то свое.

Приведу пример, у нас есть верства, к которой сделали адаптив. Какие же блоки можно выделить ?

/* Верства начало */

.container {
  position: absolute;
  top: 100px;
  left: 50px;

  display: flex;
  column-gap: 30px;
  justify-content: center;

  width: 100%;
}

/* Верства конец*/

/* Адаптив начало */

@media (max-width: 1440px) {
  ...
}

@media (max-width: 1280px) {
  ...
}

/* Адаптив конец */

В данном примере у нас всего 2 блока - Верстка и Адаптив. Не зря я назвал принцип разделения модульность. Каждый блок выполняет что-то своё и его лего можно перенести в отдельный файл без создания трудностей в прочтении/редактировании.

FBCSS предусматривает следующие типы блоков (располагать аналогично с факторами):

1. блок root - блок включает в себя псевдокласс :root

2. блок основных элементов - стили для тега html, body

3. блок переиспользуемых элементов - элементы, которые используются в разметке множество раз (тут и начинается интеграция с BEM)

4. блок анимций - сюда входят селектры, созданные для назначения анимации а также сами анимации

5. блок версти

6. блок адаптива

Практическое использование FBCSS

Давайте для закрепления материала сверстаем такой блок:

Для этого нам нужно написать html-разметку:

<div class="learn__plane-container">
  <div class="learn__plane-item">
    <p class="learn__item-num">01</p>
    <p class="learn__item-description">Use HDFS Map Reduce for storing analyzing data at scale.</p>
  </div>
  <div class="learn__plane-item">
    <p class="learn__item-num">02</p>
    <p class="learn__item-description">Consume streaming data using Spark Streaming, Flink, and Storm.</p>
  </div>
  <div class="learn__plane-item">
    <p class="learn__item-num">03</p>
    <p class="learn__item-description">Choose an appropriate data storage technology for your application</p>
  </div>
  <div class="learn__plane-item">
    <p class="learn__item-num">04</p>
    <p class="learn__item-description">Analyze non-relational data using HBase, Cassandra, and MongoDB.</p>
  </div>
</div>

Разметка базовая, у нас есть контейнер, а внутри 4 элемента с одинакой структурой.

Перейдем к самой интересной части, CSS

.learn__plane-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  
  width: 630px;
}

.learn__plane-item {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  
  width: 300px;
  height: 270px;
  background-color: #F4F8FF; /* есть у большинства элементов */
  
  padding: 30px;
}

.learn__item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 50px;
  height: 50px;
  background-color: #FFCA42;
  border-radius: 50%;
  
  font-size: 24px; /* specific-фактор */
}

.learn__item-description {
  font-size: 24px;
  
  padding-right: 15px; /* indent-фактор */
}

CSS тоже довольно простой, все выравнивания происходят с помощью grid и flex. Можно было сверстать и по другому, но я хотел осветить как можно больше форм-факторов в практическом примере, так как в отличии от блоков (обсуждаются как модули или как блоки), тема не оглашается на массы.

Ссылка на CodePen с кодом из практического примера: https://codepen.io/SmrtVrst/pen/zYQPrOZ

Спасибо за внимаение, на этом все. Распространяйте статью и спасите глаза senior-разработчиков.