Несколько вопросов по HTML и CSS?

Раньше я бездумно верстал сайты, писал для них стили. С ростом проекта в верстке и стилях у меня получалось дикое месиво, но все это работало.
Со временем я начал пользоваться 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]) и отказе от хранения глобальных стилей?
  • Вопрос задан
  • 290 просмотров
Пригласить эксперта
Ответы на вопрос 5
UnluckySerivelha
@UnluckySerivelha
Возможно, стоит посмотреть в сторону smart-grid, который работает на флексах или флоатах, сгенерировать сетку можно как угодно. Размеры блоков относительно сетки задаются с помощью миксинов, а не предопределенных классов.
Ответ написан
serjikz
@serjikz
web-developer, designer
Я считаю что нужно полное разделение (собственно, чем и является компонентный подход). Без глобальных стилей жить вряд ли будет удобно. К примеру от normalize я не могу ну вот никак отказаться. Обертки (некоторые) в любом случае будут лишние у вас и будут загромождать код, к сожалению пока мы живем с флексами и флоатами не имея гридов - придется с этим мириться.

Многие вовсе отказываются от БЭМ когда используют компонентный подход и обзывают элементы абракадаброй. Я лично от него не могу отказаться. Да, smart-grid, возможно, стоит попробовать, но опять же это не универсальное решение, как и бутстрап (ну вы меня понимаете), потому что замечательные дизайнеры и заказчики хотят от нас добиться феерических вещей, которые будут кружить голову каждого посетителя, который заходит на наш сайт.

Универсального, к сожалению, а может и к счастью, вы не найдете. К сожалению - потому что хотелось бы все делать просто и быстро. К счастью - потому что работа за счет этой "неуниверсальности" не скучная и, естественно, прибыльная, так как не каждого можно научить хорошо верстать.

Вспомните (если конечно застали) верстку таблицами. Та еще жуть была, но ничего, работали как-то. Мое личное мнение - работать как работаем, просто не отставать от быстро идущего паровоза под названием Front-end. Идти к идеалу и добиваться универсальности мы будем еще долго, если вообще придем когда-нибудь с нашими все теми же дизайнерами и заказчиками.
Ответ написан
dimovich85
@dimovich85
HTML, CSS, JS, VUE, PHP
Пожалуйста, посмотрите вот эти видео и попробуйте: https://m.youtube.com/watch?list=PLyeqauxei6je28tJ...
Это smart-grid.
Ответ написан
webinar
@webinar
Учим yii2: https://youtu.be/-WRMlGHLgRg
Как быть, если хочется писать более понятный HTML

Он более понятен только Вам. Любой другой человек не поймет Вам понятный код.
Чем хорош bootstrap - гибкость (цена этого лишние теги) и стандарт. Все знают сетку bootstrap, даже те, кто его не любит и другие сетки используют подобную структуру. Это удобно и читаемо.

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

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

Берите только нужные компоненты и выбирайте framework под себя. Они же не заставляют Вас делать каким-то определенным способом, это просто набор готовых методов. А sass позволяет собирать этот набор под себя как угодно.
Ответ написан
@Basil_Dev
А еще проще и лаконичнее выглядит PUG(особенно если знакомы с синтаксисом Python):
.movies-list
  .movie-card
    .movie-card__thumbnail
      img(src='#')
    .movie-card__details
      span.movie-card__title Название фильма
      .movie-card__rating

По поводу сетки - попробуйте CSS GRID. Очень лаконично решает 101% сеточных проблем. Плюс отсутствие лишней зависимости в коде(и 101 доп. класса в DOM, ага)
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Sveak Барнаул
от 40 000 руб.
18 авг. 2018, в 09:13
13000 руб./за проект
18 авг. 2018, в 01:10
17000 руб./за проект
17 авг. 2018, в 23:00
5500 руб./за проект