css - OOCSS 到 Long CSS 生成器

Question

目前我正在为一些使用 QT(多平台框架)开发的应用程序开发 GUI。 QT 中的 GUI 可以像普通 CSS 一样设置样式。

因此，我将 GUI 开发为一个基本的网络应用程序(HTML5、CSS3 和 JS)，并且出于某些原因我使用 LESS 预处理器进行样式设置和创建 OOCSS(面向对象的 CSS)...

由 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;
}

是否有任何工具或任务(grunt/gulp)可以将 OOCSS 转换为老式样式(长版)？

预期结果:

.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;
}

当然，我必须清理类(class)，但该工具可以节省我很多时间。

原因:我的客户在 CSS 方面并不先进。所以，OOCSS 可能对他有点困惑。

感谢您的回复亚当

Answer 1

首先，我认为您正在努力让您的客户尽可能轻松地完成这项工作，这很棒。太好了!

其次，我认为这是您的客户学习 CSS 基础知识的绝佳机会。是的，长版本不使用 OOCSS，但它现在需要管理更多的声明，从长远来看，这可能会更难管理。

话又说回来，你的客户让你帮忙解释事情。这是建立牢固的客户关系和开展良好业务的绝佳机会。

如果您的客户也能学习 LESS 就太好了，但如果他们不能，您可以随时使用 Pleeease .它完成了我们喜欢的预处理器的所有工作，但使用了 vanilla css。

祝你好运!保持真棒!