Which is the best way to present CSS?

<style>
    .containerOne {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: solid 2px black;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .w100 {
        width: 100px;
    }

    .h100 {
        height: 100px;
    }

    .p10 {
        padding: 10px;
    }

    .b2b {
        border: solid 2px black;
    }

    .br50pc {
        border-radius: 50%;
    }

    .df {
        display: flex;
    }

    .fd-c {
        flex-direction: column;
    }

    .jc-c {
        justify-content: center;
    }

    .ta-c {
        text-align: center;
    }
</style>

<div id="containerOne" class="containerOne">
    CONTAINER ONE
</div>

<div id="containerTwo" class="w100 h100 p10 b2b br50pc df fd-c jc-c ta-c">
    CONTAINER TWO
</div>