Overriding styles with a modifier?

Question

css

Hello, how can I implement style overlap. For example, we need the following HTML:
<div class="block block--mod"></div>

.block {
    display: none;
    position: fixed;
    top: 5%;
    height: 90%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 960px;
}
.block--mod {
    height: 250px;
    width: 550px;
    top: 50%;
}

How to make the properties of the modifier overlap the properties of the block itself?

Answer 1

If the modifier styles come after the main block styles, then they must be overridden, or use the selector.block.block--mod