Kevin Powell - Community•13mo ago

Which is the best way to present CSS?

Both of the following divs are identical, but I have seen both methods of applying CSS. Most people seem to teach the former, but the likes of Amazon and Facebook use the latter. Just wondering if there are any advantages to either. Maybe admin could create a poll to see which is most popular 😄

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

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

7 Replies

Tok124 (CSS Nerd)•13mo ago

this kind of code is for tailwind

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

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

Jochem•13mo ago

at the very least the arguments for or against are the same as for tailwind tailwind didn't invent utility classes

Blackwolf•13mo ago

of course, not to mention it's how Bootstrap works too

Tok124 (CSS Nerd)•13mo ago

but bootstrap is very different from tailwind

Jochem•13mo ago

I feel like method 2 with all the utility classes, especially if they're all single-line ones, kinda defeats the point of using css in the first place or rather, defeats the purpose of not just using inline styles it leads to ugly class definitions, and if you use them to make say a card, and you want to change that card down the line, now you have to find where you used it in half a dozen places instead of just changing your card-whatever class and being done it works better for some people if you're using a component based framework, but then if you have one of those it probably supports scoped CSS anyway, so why not just write out your rules like normal? It's personal preference at the end of the day though, it doesn't matter a ton

ghostmonkey•13mo ago

Utility classes are great when you want to repeat the same settings multiple times, or to be able to change lots of things at once from one spot. But making everything 100% like taht would be a pain in the ass, and you would be better off just using tailwind at that point

Blackwolf•13mo ago

I was just wondering if there were any advantages, like, often I have set rules for a div, but then used it later and changed couple of things - do these crossed out previous settings take up valuable time and resources?

Gaming

Programming

Which is the best way to present CSS?