Задать вопрос
@SergeTkach
OpenCart Forever
css

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

Я не верстальщик, но мне надоело использовать 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, но нет какой-то четкой инструкции по именованию классов)
  • Вопрос задан
  • 358 просмотров
3 комментария
Подписаться 1 Средний 3 комментария
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
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 - а это зачастую не используется, так как работаю часто с готовыми проектами.

Если приходится лезть в готовый проект, то стоит изучить его и придерживаться стиля заданного автором. Если там нет никакого стиля, то сам бог велел наговнокодить =)) Ну или отрефакторить, если заказчик готов платить.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 3
@Camaro67
Помог? - "Отметить решением"
А вам не все ли равно кто и как относится, если это решает ваши задачи и вам удобно? Сколько разработчиков, столько и мнений будет. У каждой методологии/инструмента найдутся как ярые фанаты, так и не менее ярые противники.
Ответ написан
1 комментарий
1 комментарий
profesor08
@profesor08 Куратор тега CSS
на странице слишком много html-кода

Причем тут CSS?

Минифицируй свой код, свои стили, свои скрипты. Оптимизируй и сжимай изображения. Не встраивай css и js непосредственно в html страницу.
Ответ написан
Комментировать
Комментировать
@maxzrc
Начинающий разработчик
Все же советую Вам присмотреться к БЭМ - простая и понятная методология.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Создать Телеграм бота (под запуск курса)
24 апр. 2024, в 18:39
80000 руб./за проект
Интеграция и обучение по API Яндекс Маркета
24 апр. 2024, в 17:52
20000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
24 апр. 2024, в 17:26
6000 руб./за проект
Ещё заказы