Which is better: repeat styles or put a lot of classes?

Question

css

I’ll show you right away with an example:
How better, like this:

.y { color: #f4f200; }

.b { color: #131313; }

.mb10 { margin-bottom: 10px; }

.mt10 { margin-top: 10px; }

<h3 class="y mt10">HELLO</h3>
<a href="#" class="b mb10">LINK</a>
<a href="#" class="y">LINK</a>
<h2 class="mt10 mb10">HELLO</h2>

OR SO:

<h3 class="title">HELLO</h3>
 <h3 class="title2">HELLO</h3>
 <a href="#" class="title3">HELLO</a>

.title { color:#f4f200; font-weight: bold; margin-bottom: 10px; }
.title2 { color:#131313; font-weight: regular; margin-bottom: 10px; }
.title3 { color:#f4f200; font-weight: regular; margin-top: 20px; }

Answer 1

No way, give the elements meaningful names. Not how they should look, but what they are. And don't make classes explicitly pointing to size/color etc. Because it is almost no better than layout directly in the html code through the style attribute.
You can see how the dudes from Yandex recommend .

Answer 2

Google BEM
The second option is better

Answer 3

I advise you to use sass / less and write in a way that is convenient for you. In any case, then you need to use a style minifier, which will compress and distribute everything as it should.
Also, if you have blocks that are identical in meaning, you can set a common titles style for them, and define color/size and other different styles for each title separately.

Answer 4

1st approach of course. On large projects, nowhere without it. Go to the source code of the same Yandex and see everything. What about bootstrap? Same thing, take a look at creating a button for example! There is the basis, color, size. So do you, and everyone! For this, classes were invented in order to use them many times, and write 1!
Only you need to name everything so that it would be clear what this class does!
but - Creates the base of a button.
butWarning - Makes the button look wary!
butBig - makes the button big