CODEWITHSUNDEEP
cssgruntjslessgulpoocss
Adam Řezníček
Adam Řezníček

Reputation: 45

OOCSS to Long CSS generator

Currently I am working on GUI for some app, which is developed in QT (multiplatform framework). GUI in QT can be styled as a normal CSS.

So, I developed GUI as a basic web app (HTML5, CSS3 and JS) and I used LESS preprocessor for styling and create OOCSS (Object oriented CSS) for some reasons...

Generated by LESS:

.button {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 50px;
    height: 50px;   
    text-transform: uppercase;
    text-decoration: none;  
    font-size: 14px;
    width: 120px;
    background-color: white;
    color: blue;
}

.button.button-big {
    font-size: 20px !important;
    width: 200px !important;
}

.button.button-green {
    background-color: green !important;
    color: white !important;
}

Is there any tool or task (grunt/gulp) for convert OOCSS to oldschool styling (long version)?

Expected result:

.button {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 50px;
    height: 50px;   
    text-transform: uppercase;
    text-decoration: none;  
    font-size: 14px;
    width: 120px;
    background-color: white;
    color: blue;
}

.button-big {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 50px;
    height: 50px;   
    text-transform: uppercase;
    text-decoration: none;  
    font-size: 14px;
    width: 120px;
    background-color: white;
    color: blue;

    font-size: 20px !important;
    width: 200px !important;
}

.button-green {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 50px;
    height: 50px;   
    text-transform: uppercase;
    text-decoration: none;  
    font-size: 14px;
    width: 120px;
    background-color: white;
    color: blue;

    background-color: green !important;
    color: white !important;
}

Of course, I will have to clean the classes but that tool will save me hours and hours.

Reason: My client is not advanced in CSS. So, OOCSS might be little confused for him.

Thanks for your replies Adam

Upvotes: 0

Views: 91

Answers (1)

Benjamin Gandhi-Shepard
Benjamin Gandhi-Shepard

Reputation: 161

First, I think it's great that you are trying to make this as easy as possible for your client. That's great!

Second, I think this is a great opportunity for your client to learn the basics of CSS. Yes, the long version doens't use OOCSS, but it now requires managing more declarations which could prove to be harder to manage in the long run.

Bunt then again, your client has you to help explain things. This is a great opportunity for a strong client relationship and good business.

It would be great if your client could learn LESS also, but if they can't, you can always use Pleeease. It does all the stuff we love about preprocessors, but with vanilla css.

Good luck! Stay awesome!

Upvotes: 0

Related Questions