javascript - Uglify css classname like instagram or facebook - Stack Overflow

How can i uglifiy my css files like on instagram or facebook?

e.g _8f735, _oofbn, _6ltyr It's some react plugins or something? I saw this only on instagram and facebook.

How can i uglifiy my css files like on instagram or facebook?

e.g _8f735, _oofbn, _6ltyr It's some react plugins or something? I saw this only on instagram and facebook.

• javascript
• css
• reactjs

Share Improve this question Follow asked Feb 5, 2016 at 20:48 user3075373user3075373 6811 gold badge44 silver badges1919 bronze badges 12

• Do you know how to use GuntJS? Or GulpJS? Also Uglify just means to concat and minify your files which you should do for production. – Ohjay44 Commented Feb 5, 2016 at 20:52
• but im asking about this one, i want classname exactly like in fb or insta – user3075373 Commented Feb 5, 2016 at 21:01
• Thats fine GruntJS or GulpJS will still acplish that and neither are hard to use or learn. But like I said before all they are doing is minifying the file which is what Uglify means. GruntJS has a cssmin that will do what your asking. Do you want a code sample? – Ohjay44 Commented Feb 5, 2016 at 21:03
• Also if you're looking for the naming conventions that they are using like _oofbn then your not going to find anything to do that for you. You can create a simple task to run in deployment with Grunt or Gulp that will go through and change your css but there is really no need for that. – Ohjay44 Commented Feb 5, 2016 at 21:06
• i want press and uglify my css files and synchronous this between js files and html e.g in js i add css class with name "active" and then i want press this inside my js file, css, and html – user3075373 Commented Feb 5, 2016 at 21:08

 |  Show 7 more ments

2 Answers 2

Sorted by: Reset to default 3

Have a look at CSS Modules.

Example from React CSS Modules:

In the context of React, CSS Modules look like this:

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

Rendering the ponent will produce a markup similar to:

<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>

and a corresponding CSS file that matches those CSS classes.

Important: class names can have different format.

What you want, is probably done by using classname maps.

Currently, you have different options with the class rename already implemented:

• Birdy, a Node.js web server that is using the behavior that you want for production.
• react-spa-boilerplate, a react boilerplate for building single page apps that uses class renaming.

If you are searching for a library to do this by yourself, see one of these:

• closure-stylesheets
• postcss
• webpack & css-loader

Probably there are some other alternatives out there but for me these are the best ones.

Anyway, keep in mind that in the most cases, this is a unnecessary step that only should be done for pages with a very high network traffic to reduce the bytes sent to the client.