Uglify css 类名，如 instagram 或 facebook-解网

问：

我怎样才能像在 instagram 或 facebook 上一样丑化我的 css 文件？

例如，_，是一些反应插件什么的？我只在 instagram 和 facebook 上看到过这个。_8f735oofbn_6ltyr

javascript css 反应

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

呈现组件将生成类似于以下内容的标记：

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

以及与这些 CSS 类匹配的相应 CSS 文件。

重要提示：类名可以采用不同的格式。

1赞 Iegor Azuaga 3/13/2016 #2

你想要的，可能是通过使用类名映射来完成的。

目前，您有不同的选项，并且已经实现了类重命名：

Birdy，一个 Node.js Web 服务器，它使用您想要用于生产的行为。
react-spa-boilerplate，一个用于构建使用类重命名的单页应用程序的 React 样板。

如果您正在寻找一个库来自己执行此操作，请参阅以下内容之一：

closure-样式表
postcss的
webpack 和 css-loader

可能还有其他一些选择，但对我来说，这些是最好的选择。

无论如何，请记住，在大多数情况下，这是一个不必要的步骤，只应该对网络流量非常高的页面执行，以减少发送到客户端的字节数。

上一个：Htaccess 仅适用于友好的 url

下一个：如何将带有分隔符的联接数组拆分为块

Uglify css 类名，如 instagram 或 facebook

Uglify css classname like instagram or facebook

评论