Атомарный CSS (функциональный CSS) для LibArea

Evg Evg 29 Сентября 2021

Атомарный CSS (функциональный CSS) был предложен в 2014 году как методология, организованная вокруг идеи создания небольших одноцелевых классов с именами, основанными на визуальных функциях.

Этот подход полностью противоречит некоторым другим.

Теперь мы стилизуем с помощью разметки и редактируем HTML-шаблоны вместо таблиц стилей. Стилизуем т.е. не в глобальной области (таблица стилей), а на уровне модуля и блока.

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

Другой подход, в общем.

Введение есть, а теперь о главном )

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

Создали файл стилей style.css, который должен описывать всё в рамках этого проекта. (Меньше 15кб в несжатом виде, менее 700 строк кода.)

Далее, смотрим в папку проекта и видим наличие других файлов: users.css, space.css, 404.css, которые подключаются на необходимых страницах.

О чем это может говорить? Возможно у нас в style.css чего-то не хватает (раз дополняем), а если хватает там всё, то зачем эти файлы?

Эта ситуация характерная, мы ставим что-то глобальное, большое, например, Bootstrap,а далее пишем своё? Что-то в Bootstrap нет?

Тут необходиму убрать такие вещи. Это переделано, лишнее удалено, кода стало меньше, легче поддерживать.

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

Посмотрите на код (в консоли браузера) Yahoo!, например.

И второе, что сделано, — локализация. Необходимо было перевести всё в нижний регистр. Это действительно имеет смысл.

<?= includeTemplate('no-content', ['lang' => 'there are no comments']); ?>

И третье,  — админка переведена из модулей. После того, как будет наведен порядок в css, необходимо будет приступить и к php. Там очень много работы.

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

2 Ответа

  1. OleStep OleStep 29 Сентября 2021

    Частично в новом дизайне этот подход уже используется?

    1. Evg Evg 29 Сентября 2021

      Да, просто изменений в новой версии больше и «новый» дизайн станет основным.