Раньше я бездумно верстал сайты, писал для них стили. С ростом проекта в верстке и стилях у меня получалось дикое месиво, но все это работало.
Со временем я начал пользоваться CSS фреймворками, использовал bootstrap, uikit.
Использовать фреймворки у меня получалось, но мне не нравилось, что приходится подстраиваться под код, написанный другими людьми, поэтому я решил писать стили сам, но попытаться сделать это с умом.
Я начал использовать BEM, что-то похожее на SMACSS. Сейчас, глядя на когда-то написанный мной код, я могу сказать, что мне он не очень нравится.
Я долгое время обдумывал как правильно писать стили, верстку и в итоге не могу написать никак. Я не могу придумать способа красивого написания HTML/CSS, который бы устраивал меня.
Последний мой "загон" касается красоты написания HTML. На многих сайтах я замечал, что люди пишут кучу вспомогательных мелких стилей, а затем напихивают это все в верстку.
Получается что-то вроде этого:
<div class="col-2 col-sm-3 col-lg-2">
<a class="clip-card" href="#">
<div class="clip-card_poster-wrap">
<img class="clip-card_poster" src="#" alt="">
</div>
<div class="clip-card_about">
<div class="clip-card_name t-overflow t-w-sb">Название фильма</div>
<div class="clip-card_rating txt-ellpss txt-s-12 txt-c-9">
<span class="imdb">5.5</span>
<span class="kinopoisk">5.4</span>
</div>
<div class="clip-card_price txt-ellpss txt-s-12">
Бесплатно
</div>
</div>
</a>
</div>
Мне подобное сложно читать. Куда проще прочесть такой вариант:
<div class="movies-list">
<div class="movie-card">
<div class="movie-card__thumbnail">
<img src="#" />
</div>
<div class="movie-card__details">
<span class="movie-card__title">Название фильма</span>
<div class="movie-card__rating">
...
</div>
</div>
</div>
...
</div>
Для меня верстка во втором случае читается просто. В первом же случае она содержит множество непонятных вспомогательных классов.
Один из вопросов, который возник у меня, касается сетки. Если при использовать bootstrap или что-то подобное, то сетки обычно задаются таким способом:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-1">
...
</div>
...
</div>
</div>
Как быть, если хочется писать более понятный HTML, например:
<div class="post-list">
<div class="post">
...
</div>
</div>
Получается, что во всех случаях, когда нужна сетка, это следует прописывать в стилях. Я читал, что для этих целей можно использовать, например, Susy. Так ли это и хорош ли такой подход?
Мне хотелось бы писать чистый, легко читаемый HTML и не сильно гадить на стороне CSS.
Я считаю, что CSS был создан для того, чтобы стилизовать HTML документ, а HTML должен четко описывать информацию без лишних деталей.
Помимо всего, описанного выше, хотелось бы узнать, как более опытные верстальщики организуют свой код.
Какой методологии вы придерживаетесь, описывая стили? Как минимизировать дублирование CSS при описании не абстрактных grid, col и т.д., а post-list, photo-list и т.д. Как вы относитесь к идее хранения scoped стилей в файлах с компонентами (напр. при использовании react/vue [
cssinjs.org]) и отказе от хранения глобальных стилей?
