It is a good practice to have utility (helper) CSS classes usually with u- prefix or without any.

However, you never use camel case for class names like in your question, it could be u-padding-top instead but it is also a very good practice to search for a middle way. Try to find the shortest possible name but keep context at the same time. In this specific case for paddings and margins it is common to use today even shorter variant, for example pt10 could be your padding-top: 10 units. The most popular CSS framework Bootstrap 4 already use similar approach.

There is last point to keep in mind. While helpers are good it doesn't mean they should be used everywhere and you should not have next HTML <div class="margin-top-10 font-size-20 color-red"> in any codebase because the main point of HTML is semantics, always use a component styles and override specific elements with utils when needed, i.e.

<div class="panel mt-0"> <!-- reset top margin for 1st panel -->
   ...
</div>
<div class="panel">
   ...
</div>

Talking about the semantics in 2017 I would recommend to use custom tags instead of classes for components, i.e. <panel> and not <div class="panel"> and don't forget to add display: block to CSS.

P.S. I still use inline CSS in some cases where I need to make a specific DOM element unique. Later if there is similar styling found in other element util class could be created.

P.S.S. remember that for emails only inline CSS should be used, Today it is usually done with the help of plugins which transform classes into inline CSS.

This seems like porting CSS into classes, instead of describing the content in HTML and styling it with CSS. That is, the class attribute becomes a de facto style element.

I have seen some scenarios dealing with user-generated content where this might make sense, but otherwise I wouldn't go anywhere near a scheme like this. Even a simple change to your site or UI will require manual updates to every single instance of the class... or more likely, you end up with

.red { color: blue }
.padding-10 { padding: 6px }

Much better to name things to purpose then style to that purpose:

.header { color: $colour-brand; }

The header will always be a header, even if the brand changes.

Its a priority that any developer teams sets for any kind of project.

You might be aware of the term 'DRY' i.e. Don't Repeat Yourself.

Well now question comes is, what should be DRY; HTML or CSS?

So the example you mentioned is keeping the CSS DRY and allowing class name repetition in HTML.

If you go for DRY HTML, use of Custom Tags is much better idea; as mentioned by Mev-Rael. It keeps both HTML and CSS DRY.

I think it is up to the project and its scale.

As Medium is a blogging platform, keeping CSS DRY suits better.

Compare naming code to naming a person. Your id="NirmalyaGhosh" and your function class="WordpressDeveloper." I would not name you class="human male height-average glasses tshirt hairLength-medium". That doesn't really describe your function.

It's generally considered bad practice to let the markup control the styles. Names should be more like <button id="subscribeButtonQuestionPage" class="button primaryCta"> rather than <button class="button relative topalign moveDown20 small blue">.

That said, I know many bootstrap styles work like that. It all depends on who is doing the developing and how the app is structured.