Some HTML and CSS questions?

Question

css

I used to mindlessly make up websites, write styles for them. With the growth of the project in layout and styles, I got a wild mess, but it all worked.
Over time, I started using CSS frameworks, using bootstrap, uikit.
I was good at using frameworks, but I didn't like having to adapt to other people's code, so I decided to write the styles myself, but try to be smart about it.
I started using BEM, something similar to SMACSS. Now, looking at the code I once wrote, I can say that I don't really like it.
For a long time I thought about how to write styles, layout correctly, and in the end I can’t write in any way. I can't think of a way to write beautiful HTML/CSS that suits me.
My last "pen" concerns the beauty of writing HTML. I've noticed on many sites that people write a bunch of auxiliary small styles, and then shove it all into the layout.
It turns out something like this:

<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>

It's hard for me to read this. Much easier to read like this:

<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>

For me, the layout in the second case is easy to read. In the first case, it contains many incomprehensible auxiliary classes.
One of the questions I have is about the grid. If you use bootstrap or something similar, then the grids are usually set in this way:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-1">
            ...
        </div>
        ...
    </div>
</div>

What if you want to write more understandable HTML, for example:

<div class="post-list">
    <div class="post">
        ...
    </div>
</div>

It turns out that in all cases when a grid is needed, this should be written in styles. I read that for these purposes, you can use, for example, Susy. Is this true and is this approach good?
I'd like to write clean, easy to read HTML and not mess around with CSS too much.
I believe that CSS was created to style an HTML document, and HTML should clearly describe information without unnecessary details.
In addition to everything described above, I would like to know how more experienced layout designers organize their code.
What methodology do you follow when describing styles? How to minimize CSS duplication when describing not abstract grid, col, etc., but post-list, photo-list, etc. How do you feel about the idea of ​​storing scoped styles in files with components (for example, when using react/vue [cssinjs.org ]) and not storing global styles?

Answer 1

Perhaps you should look towards smart-grid, which works on flex or float, you can generate a grid as you like. Block sizes relative to the grid are set using mixins, not predefined classes.

Answer 2

I believe that a complete separation is needed (in fact, which is what the component approach is). Without global styles it will hardly be convenient to live. For example, I can’t refuse normalize. Wrappers (some) in any case will be superfluous for you and will clutter up the code, unfortunately, while we live with flex and float without having grids, we will have to put up with this.
Many people completely abandon BEM when they use a component approach and call elements gibberish. I personally can't refuse it. Yes, smart-grid might be worth a try, but again, this is not a universal solution, like bootstrap (well, you understand me), because great designers and customers want us to achieve enchanting things that will turn the head of every visitor who visits our website.
Universal, unfortunately, or perhaps fortunately, you will not find. Unfortunately - because I would like to do everything simply and quickly. Fortunately - because the work due to this "non-universality" is not boring and, of course, profitable, since not everyone can be taught to make up well.
Remember (unless, of course, you caught it) layout with tables. That still horror was, but nothing, they worked somehow. My personal opinion is to work as we do, just keep up with the fast moving engine called Front-end. We will go to the ideal and achieve universality for a long time, if we ever come with our same designers and customers.

Answer 3

Please watch these videos and give it a try: https://m.youtube.com/watch?list=PLyeqauxei6je28tJ...
This is a smart-grid.

Answer 4

How to be, if you want to write more understandable HTML

It is more understandable only to you. Any other person will not understand the code you understand.
What bootstrap is good for is flexibility (the price of this extra tags) and standard. Everyone knows the bootstrap grid, even those who don't like it and other grids use a similar structure. It's convenient and readable.
For some reason, you think that fewer tags are good. But it's not. A lot of extra tags is bad, but this does not mean that the less the better. There must be a middle ground. Many times I tried to write my own grid, more concise than that of bootstrap - and each time I run into the fact that they have a golden mean. For a specific project, you can come up with your own bike that will ride. But in the context of universality, and this is the main thing for the framework, bootstrap and similar grids are the very thing.
Take only the necessary components and choose the framework for yourself. They do not force you to do it in any particular way, it is just a set of ready-made methods. And sass allows you to assemble this set for yourself however you like.

Answer 5

And PUG looks even simpler and more concise (especially if you are familiar with Python syntax):

.movies-list
  .movie-card
    .movie-card__thumbnail
      img(src='#')
    .movie-card__details
      span.movie-card__title Название фильма
      .movie-card__rating

As for the grid, try CSS GRID. Very concisely solves 101% of grid problems. Plus, the absence of unnecessary dependencies in the code (and 101 additional classes in the DOM, yeah)