Factor and Block CSS — методология CSS

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-разработчиков.