![](https://habrastorage.org/getpro/habr/upload_files/259/113/d52/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:
Создание простой методологии для CSS
Дать возможность интеграции с BEM
Сделать код многих новичков чище
Основные понятия в 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 включает в себя такие типы факторов как:
webkit-фактор - css-свойства, начинающиеся на -webkit. Они не подразделяются на отдельный факторы, в отличии от других свойств, так как их разделение уменьшит читабельность
shape-фактор - css-свойства, визуально изменяющие элемент (важно, сюда относяться все свойства, которые могут быть применены к любому элементу)
display-фактор - css-свойста,относящиеся к конкретным значениям одноименного свойства display (например, row-gap, grid-template-columns, flex-wrap)
position-фактор - css-свойства, которые изменяют положение элемента в пространстве по осям OX и OY (например, position, top, left)
specific-фактор - css-свойства, относящиеся к отжельным элементам или типам элементов (к примеру, color, font-size, text-stroke)
indent-фактор - отступы (padding, margin)
other-факторы - все другие свойства, которые сложно отнести к какой-либо из вышеупомянутых категорий или сложно сгруппировать в одну новую (например, z-index)
С типами факторов мы познакомились, то и это ещё не все, у них есть "приоритетность" - порядок, в котором их стоит писать. Очередность выглядит так (первый фактор нужно указывать в качестве первого куска кода, последний - последнего):
position-фактор
display-фактор
shape-фактор
specific-фактор
indent-фактор
other-фактр
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 предусматривает следующие типы блоков (располагать аналогично с факторами):
блок root - блок включает в себя псевдокласс :root
блок основных элементов - стили для тега html, body
блок переиспользуемых элементов - элементы, которые используются в разметке множество раз (тут и начинается интеграция с BEM)
блок анимций - сюда входят селектры, созданные для назначения анимации а также сами анимации
блок версти
блок адаптива
Практическое использование FBCSS
Давайте для закрепления материала сверстаем такой блок:
![](https://habrastorage.org/getpro/habr/upload_files/0ab/989/2ec/0ab9892eca0d1bf95021580fd95e9b4b.png)
Для этого нам нужно написать 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-разработчиков.