CODEWITHSUNDEEP
oocss
Carla Raquel
Carla Raquel

Reputation: 115

How to make a button position independent using OOCSS?

I have a button with the following style:

.btn 
{
    width: 100px;
    height: 40px;
    float: right;
    display: inline-block;
    background-color: #555555;
    border:1px solid #ffffff;
    font-family:OpenSansRegular;
    font-size:15px;
    color: #ffffff;
}

As I reckon, using OOCSS principles, we should separate visual from structure. Something like this (I would assume - correct me if I'm wrong):

.btn 
{
    width: 100px;
    height: 40px;
    float: right;
    display: inline-block;
}

.skin
{
    background-color: #555555;
    border:1px solid #ffffff;
    font-family:OpenSansRegular;
    font-size:15px;
    color: #ffffff;
}

But what if I want to use the exact same configurations for another button, except for the floating position which I would like to remove, how should I do it? Isn't OOCSS being restrictive by coupling the positioning in the structure?

Upvotes: 0

Views: 41

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 26014

This likely depends on what exactly the structure you actually have is, but I would likely do something like the following which still follows OOCSS principles:

.btn { /* Default button structure properties */
    width: 100px;
    height: 40px;
    display: inline-block;
}
.float-right { /* More specific button structure properties */
    float: right;
}
.skin { /* Default button skin properties */
    background-color: #555555;
    border: 1px solid #ffffff;
    font-family: OpenSansRegular;
    font-size: 15px;
    color: #ffffff;
 }

The actual class names could be different, but given you only have one more specific property, I think the specific name makes sense in this case.

Upvotes: 0

Related Questions