OOCSS 到长 CSS 生成器答案

【问题标题】：OOCSS to Long CSS generatorOOCSS 到长 CSS 生成器
【发布时间】：2015-08-29 23:34:16
【问题描述】：

目前我正在为一些应用程序开发 GUI，该应用程序是在 QT（多平台框架）中开发的。 QT 中的 GUI 可以作为普通 CSS 样式设置。

因此，我将 GUI 开发为一个基本的 Web 应用程序（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 转换为 oldschool 样式（长版）？

预期结果：

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

当然，我将不得不清理课程，但该工具会为我节省大量时间。

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

感谢您的回复亚当

【问题讨论】：

你为什么要这样做？
Couse 这对开发该应用程序的客户来说会更容易。我只需要准备 CSS 类...
我不明白。您的意思是您的客户更容易维护吗？原来分解的类更容易维护。
当然可以，但他没有 CSS 经验。
有一些用于读取/解析 CSS 的库，然后您可以根据需要操作规则并重写它们，但实际上我认为这个问题在数学上并没有很好的定义。

标签： css gruntjs less gulp oocss

【解决方案1】：

首先，我认为您尝试让您的客户尽可能轻松地完成这项工作真是太好了。太好了！

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

再说一遍，你的客户让你帮忙解释一下。这是建立牢固的客户关系和良好业务的绝佳机会。

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

祝你好运！保持真棒！

【讨论】：