Factor and Block CSS — методология CSS15.06.2024 10:15

259113d5273abc69837104ee4cd68e8b.webp

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

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

0ab9892eca0d1bf95021580fd95e9b4b.png

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


  

    
01

    
Use HDFS Map Reduce for storing analyzing data at scale.

  

  

    
02

    
Consume streaming data using Spark Streaming, Flink, and Storm.

  

  

    
03

    
Choose an appropriate data storage technology for your application

  

  

    
04

    
Analyze non-relational data using HBase, Cassandra, and MongoDB.

Разметка базовая, у нас есть контейнер, а внутри 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-разработчиков.

Habrahabr.ru прочитано 2746 раз