Правильно ли верстать атомарно в 2019 году

@novichek_1905 · Регистрация: 16.02.2018

Студворк — интернет-сервис помощи студентам

Всем привет! Для себя недавно открыл атомарный подход организации стилей. Для тех кто не в курсе, это присвоение одного свойства классу, и последующее его использование по всему проекту. Такие классы как правило выглядят так:

CSS
1
2
3
4
5
6
7
.p-20{padding: 20px;}
.lh-24{line-height: 24px;}
.fs-16{font-size: 16px;}
.fw-bold{font-weight: bold;}
.bg-color-1{background-color: red;}
.color-2{color: white;}
.br-3{border-radius: 3px;}

В чем лично для меня профит, это минимальный css файл, очень красиво выглядит в sass, так как стили и классы генеряться в циклах, и естественно скорость верстки, так как по сути немалая часть работы уже выполнена.

Из минусов, всеравно необходимо использовать семантические классы, то есть кроме классов, отвечающие за первоначальный вид, присутствуют классы, для интерактивного взаемодействия (ативное состояние, hover) к примеру:

PHP/HTML
1
<div class="link-item active d-block lh-24 fs-16 p-20 fw-bold bg-color-1 color-2 br-3">какой-то текст</div>

CSS
1
2
3
4
.link-item.acitve{
background-color: blue;
color: red;
}

Бутстрап пошел по примерно такому же пути, у него атомарный подход, но есть одно одно, получается на выходе избыточный html потому что присутствует кучу классов, кроме его собственных, так ещё и свои, собственный css хоть и маленький, но он кешируется браузером в отличии от html страницы. То есть хочу найти какой-то баланс между удобством, оптимизацией, и скоростью работы. И да, про БЭМ мне не пишите, классы созданные таким образом выглядят громоздко, и кроме того, нету возможности их переиспользования, так как они семантические, т.е привязанные по смыслу к контенту.

Добавлено через 4 часа 13 минут
очень жду рекомендаций Гуру!)

Добавлено через 2 часа 5 минут
Опытный человек, поделись знаниями! Отзовись!

@AlexZaw · 10.12.2018, 17:27

Не знаю как это выглядит в sass, но в сгенерированном css это будет выглядеть как куча классов, плюс, как вы уже сами отметили, это куча классов в html.
БЭМ (цитата с их сайта) позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste». Да названия классов получаются громоздкие, но, на мой взгляд, смотрятся они лучше чем в вашем варианте.

@novichek_1905 · 10.12.2018, 18:26 **[ТС]**

Сообщение от AlexZaw

и повторно использовать существующий код

Наверное я не видел хороших примеров переиспользования БЭМ. Вот банальный вопрос, есть какой-то элемент, который используется в блоке с видео контетом, прошло время, дизайнер добавил новую рубрику, скажем аудио, но некоторые элементы взял похожие с блока видео, так как один дизайн, и как применить в таком случае классы с блока видео, или его отдельные компоненты, если семантически это выглядит глупо, да и сам бэм отрицает существования элемента без блока...

Добавлено через 7 минут

Сообщение от AlexZaw

Не знаю как это выглядит в sass

очень круто выглядит) Код ниже создает классы кратные двум .icon-size-16, .icon-size-18, .icon-size-20

CSS
1
2
3
4
5
6
7
8
9
10
@for $i from 16 through 40 {
  @if ($i % 2 == 0) {
    .icon-size-#{$i} {
      width: #{$i}px;
      height: #{$i}px;
    }
 
  }
 
}

Добавлено через 33 секунды
таким образом написаны прототипированные размеры для всех иконок на сайте...

@novichek_1905 · 11.12.2018, 10:59 **[ТС]**

теме ап, все ещё интересует вопрос)

@Fedor92 · 11.12.2018, 13:29

Сообщение от novichek_1905

теме ап, все ещё интересует вопрос)

Что Вас интересует?

Для шаблонной сетки такое именование классов ещё сгодится и то с натяжкой, а для именования остального контента лучше использовать названия максимально соответствующие содержимому... В противном случае, человек, который будет править Ваш код столкнётся с серьёзными проблемами...

@novichek_1905 · 11.12.2018, 14:40 **[ТС]**

Сообщение от Fedor92

В противном случае, человек, который будет править Ваш код столкнётся с серьёзными проблемами...

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

@Fedor92 · 11.12.2018, 15:04

Сообщение от novichek_1905

На мой взгляд

Это только на Ваш взгляд... Всегда хорошим тоном было обозначение классов по семантической принадлежности... Элемент имеет класс header_btn... Интуитивно понятно, что класс принадлежит кнопке в шапке... Когда посторонний человек видит класс icon-size-16, что он должен думать? 16 - это размер? а может порядковый номер? А может номер страницы? Или идентификатор категории? А что будет, если я его удалю на сайте где около 1000 страниц? Абстрактные имена классов всегда приводят к путанице и как правило избыточности в стилях... Ибо на многостраничнике при удалении лишнего кода из CSS практически невозможно отследить падение стилей...

@novichek_1905 · 11.12.2018, 15:35 **[ТС]**

Сообщение от Fedor92

что он должен думать?

Он должен думать, так как там написано, в этом и прелесть подхода)

Сообщение от Fedor92

А что будет, если я его удалю на сайте где около 1000 страниц?

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

Что бы Вы правильно меня понимали, я в поисках подхода, который позволит максимально быстро верстать, и избавит от дублирования кода... Сейчас же я вижу, что часто делают так

PHP/HTML
1
<div class="btn btn-red btn-small">Кнопка</div>

из кода понятно, что есть три класа, общий, цвет, размер, но вот вопрос, как быть, если появилась необходимость заменить в sass цвет red, получается клас отвечающий за цвет невалиден... И тут на помощь только абстрактное наименование в голову приходит. Т. Е. есть случаи, когда абастрактный подход просто необходим, и не понятно как организовать это все добро, с минимальной html структурой, и с супер гибкостью)

Fedor92, а вы используете бустрап? Как считаете, атомаризация там излишняя?

@Fedor92 · 11.12.2018, 16:02

Сообщение от novichek_1905

Он должен думать, так как там написано, в этом и прелесть подхода)

Я Вам, как разраб говорю Вашей головой никто думать не будет...

Особенно в режиме многозадачности...

Сообщение от novichek_1905

Fedor92, а вы используете бустрап? Как считаете, атомаризация там излишняя?

Использую, но только сетку и иногда некоторые js -плюшки... Что касается остального, классов для кнопок и прочей фигни, то нет... Шаблонизация нужна только на этапе построения сетки...

@novichek_1905 · 11.12.2018, 16:07 **[ТС]**

Сообщение от Fedor92

Я Вам, как разраб говорю Вашей головой никто думать не будет... Особенно в режиме многозадачности...

А придется думать, если речь идет о совместной работе над проектом, это касается любой выбранной метадологии, иначе нет смысла в методологии вообще...

Сообщение от Fedor92

Шаблонизация нужна только на этапе построения сетки...

Ясно, благодарю!

Может есть у кого ещё своё видение организации стилей?

@Fedor92 · 11.12.2018, 16:09

Сообщение от novichek_1905

А придется думать, если речь идет о совместной работе над проектом, это касается любой выбранной метадологии, иначе нет смысла в методологии вообще...

Смешно...

Ну удачи в поисках близнеца...))

@novichek_1905 · 11.12.2018, 16:23 **[ТС]**

Сообщение от Fedor92

Смешно... Ну удачи в поисках близнеца...))

В Яндекс же соблюдают БЭМ, или там близнецы?) Командная работа с применением любой из методологий это единый организм на самом деле, если это не так, то и на выходе получиться говнопродукт)

@Fedor92 · 11.12.2018, 16:35

Сообщение от novichek_1905

В Яндекс же соблюдают БЭМ, или там близнецы?)

Вот именно об этом я Вам и толкую... Попадались мне сайты с самодельной сеткой и ни к чему хорошему это не привело... Разрабы городили по 40000 строк лишних классов и пойди разбери что они хотели этим сказать... И что из этого можно удалить... Я Вам больше скажу, что у каждого разраба своё виденье прекрасного... И каждый интерпертирует БЭМ по своему... А для затравки возьмите любую тему битрикса не самописную, а аспро, к примеру, и попробуйте разобраться, что там к чему...

Эти разрабы тоже считают, что делают суперофигительные темы в команде, кстати...

@novichek_1905 · 11.12.2018, 16:41 **[ТС]**

Сообщение от Fedor92

Попадались мне сайты с самодельной сеткой и ни к чему хорошему это не привело...

А я не применяю что-то своё, acss - это подход, который вполне себе описан документально. На его основе даже есть спецификация определенная... Мне кажется вы не верно меня поняли изначально...
Ну да и ладно, в любом случае, мне пока ничего не понятно)

@Fedor92 · 11.12.2018, 16:49

Сообщение от novichek_1905

Мне кажется вы не верно меня поняли изначально

Всё я правильно понял...

И рекомендую отказаться от этой идеи...

@Quanienci · 11.12.2018, 20:23

Не по теме:

Я не пью который год, жизнь веду я честную. Но тоска меня гнетет, лезет в душу грешную. Аномально все вокруг. В жизни аномально. Я верстать, верстать хочу, только классов мало. Не ответит тишина, Федор не ответит, атомарно ли верстать в том и этом свете.

Надо миру доказать, показать наглядно: атомарнинько верстать -- очень атомарно!!! Пусть жена храпит, как трактор. И соседи пусть шумят. Все на свете атомарно! Атомарно все. Ништяк!

@novichek_1905 · 12.12.2018, 10:25 **[ТС]**

Не по теме:

Quanienci, прекрасная поэзия!

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	10.12.2018, 17:27
	Не знаю как это выглядит в sass, но в сгенерированном css это будет выглядеть как куча классов, плюс, как вы уже сами отметили, это куча классов в html. БЭМ (цитата с их сайта) позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste». Да названия классов получаются громоздкие, но, на мой взгляд, смотрятся они лучше чем в вашем варианте. 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	11.12.2018, 10:59 [ТС]
	теме ап, все ещё интересует вопрос) 0

@Quanienci
	11.12.2018, 20:23
	Не по теме: Я не пью который год, жизнь веду я честную. Но тоска меня гнетет, лезет в душу грешную. Аномально все вокруг. В жизни аномально. Я верстать, верстать хочу, только классов мало. Не ответит тишина, Федор не ответит, атомарно ли верстать в том и этом свете. Надо миру доказать, показать наглядно: атомарнинько верстать -- очень атомарно!!! Пусть жена храпит, как трактор. И соседи пусть шумят. Все на свете атомарно! Атомарно все. Ништяк! 3

@novichek_1905
	12.12.2018, 10:25 [ТС]
	Не по теме: Quanienci, прекрасная поэзия! 0