Как Вы относитесь к SMACSS?

Question

[Серж Ткач]

Я не верстальщик, но мне надоело использовать bootstrap и читать в отчетах Google Speed Insights, что на странице слишком много html-кода. Решил посмотреть в сторону методологий верстки. Нахожу SMACSS весьма интересной.

Но хотел бы узнать мнение именно верстальщиков, которые использовали эту методологию на практике. У меня просто привычка сразу под блоком вешать меди-запросы, чтобы все было рядом. А тут как раз все надо разделить. Не запутывает ли это?

Пробовал использовать БЭМ - вроде в теории все четко, но на практике мне не нравятся длинные названия классов. Если укорачивать - они не семантичные. Каким-то чудом пришел к использованию разметки вида:

<article class="product _product-item">
  <h2 class="title _product-item"></h2>
</article>

Вместо

<article class="product-item">
  <h2 class="product-item__title"></h2>
</article>

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

Во вторых: в css .title._product-item можно переопределить как угодно, чтобы работало правило, что каждый элемент можно перенести куда угодно, и он не потеряет своих свойств.

В третьих: title - более семантично, чем product-item__title (по крайней мере, мне так кажется, но я точно не могу сказать, так как у всех на этот счет разное мнение. Из четких инструкций я нашел только использование тегов html5, но нет какой-то четкой инструкции по именованию классов)

Comments

[alex]

В третьих: title - более семантично

откуда вы узнали, что css имеет хоть какое-нибудь отношение к семантике?

[Серж Ткач]

Alex, так вот именно, что сомневаюсь. Иногда это косвенно упоминается в некоторых обсуждениях. И еще вроде бы в поиске видел доп метки, которых не было задано в микроразметке. Но пытался вернутья к тому проекту, так сейчас даже из микроразметки данные не показывает в результатах поиска...

[Серж Ткач]

А есть кто реально использовал методологию SMACSS??

Answer 1

[Сергей delphinpro]

Css классы вообще не несут никакой семантики. Хоть как обзывайте, всем пофиг. Если вы говорите о "понятности" для программиста/верстальщика, то тут вы правы — мнения разные.
Что такое .title? Заголовок. Какой заголовок? А хз...
А что такое .product-item__title? Это заголовок блока в списке товаров. Very good.

Окей. Но мы же видим в разметке class="title _product-item". А в css мы это видим? Нет. У нас голый класс .title {}, и еще где-то составной есть .title._product-item. Очевидно, что .title используется с другими блоками тоже. Пришел новый человек с задачей поменять поменять цвет тайтлов ну допустим в отзывах. Он откроет страницу, посмотрит в инспектор, увидит что цвет заголовка задан в классе .title, а про .title._product-item он даже не в курсе будет, это на другой странице сайта, в css через 1000 строк. Он просто поменяет цвет в .title. А потом выяснится что заголовки в товарах тоже поменяли цвет. А не надо было.

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

Ну и можно слегка поэкспериментировать, объединив SMACSS с BEM.
Оставить уровни base и layout. Оставить уровень modules — по сути это будут БЭМ-блоки. Стейты выкинуть — состояния блока лучше в нем самом описывать. Темы — по желанию.

если не использовать SASS - а это зачастую не используется, так как работаю часто с готовыми проектами.

Если приходится лезть в готовый проект, то стоит изучить его и придерживаться стиля заданного автором. Если там нет никакого стиля, то сам бог велел наговнокодить =)) Ну или отрефакторить, если заказчик готов платить.

Comments

[Vitaliy]

> Всё уже придумано до вас — БЭМ

придумали еще лучше - scoped стили

Answer 2

[Camaro67]

А вам не все ли равно кто и как относится, если это решает ваши задачи и вам удобно? Сколько разработчиков, столько и мнений будет. У каждой методологии/инструмента найдутся как ярые фанаты, так и не менее ярые противники.

Comments

[Серж Ткач]

Ну, честно говоря, мне часто приходится работать с формами, и поднадоела громоздкость

Вот такое c bootstrap:

<div class="form-group">
  <label class="col-sm-2 control-label" for="input-meta-description<?php echo $language['language_id']; ?>"><?php echo $entry_meta_description; ?></label>
  <div class="col-sm-10">
    <textarea name="product_description[<?php echo $language['language_id']; ?>][meta_description]" rows="5" placeholder="<?php echo $entry_meta_description; ?>" id="input-meta-description<?php echo $language['language_id']; ?>" class="form-control"><?php echo isset($product_description[$language['language_id']]) ? $product_description[$language['language_id']]['meta_description'] : ''; ?></textarea>
  </div>
</div>

Вот такое по-своему:

<div class="le-row">
  <span class="le-label"><?=$entry_meta_description?>:</span>
  <textarea id="meta-description-<?=$product['product_id']?>-<?=$language['language_id']?>" cols="5" rows="5" class="le-value _meta-description" data-field="meta_description"><?=$product['product_description'][$language['language_id']]['meta_description']?></textarea>
 </div>

Да, там немного и суть сверстанного изменилась, но думаю, очевидно, что html-кода явно меньше. Но надо отвлекаться на css, когда задача в общем-то стоит делать функционал, а не оформительство...

Answer 3

[profesor08]

на странице слишком много html-кода

Причем тут CSS?

Минифицируй свой код, свои стили, свои скрипты. Оптимизируй и сжимай изображения. Не встраивай css и js непосредственно в html страницу.

Answer 4

[Максим]

Все же советую Вам присмотреться к БЭМ - простая и понятная методология.

Ваш вариант разметки не понятен. Зачем нужна точка, когда можно и без нее.

На своем опыте могу сказать, что сначала тоже не хотел использовать БЭМ. Но потом начал и все стало просто прекрасно. Код легко поддерживать, он понятен другим людям, можно использовать части кода для других проектов.

А если углубиться, то стек посоветую следующий - сборка gulp, препроцессор на Ваш выбор (я использую Sass), БЭМ. Хороший набор для верстки :)

Comments

[Серж Ткач]

А что насчет "семантичности" при назывании классов? Или микроразметка лучше?

[Максим]

Серж Ткач, плюс БЭМ в том, что вы разбиваете Ваш проект по блокам и можете легко его поддерживать и использовать блоки повторно.

Советую все называть так, как есть на самом деле. Приведу простой пример кода.

<main class="page-main">
    <section class="page-main-header">
      <h1 class="page-main-header__title">
        
      </h1>
      <p class="page-main-header__description">