How to obfuscate CSS class names with React and Webpack

How to obfuscate CSS class names with React and Webpack

No matter of the article title, this approach is legit for any type of CSS selectors :)

Motivation

When people say that they dislike CSS it’s mostly because of the cascading. In the modern age of component based development we managed to fix scalability of our Front-End apps or Front-End part of our apps if that terminology suits you better. But CSS is more than less the same old thing if we approach it in the traditional way.

Luckily enough JavaScript is not the only part of FE which evolves with time and performance gains can and need to be implemented on UI / App / Network levels…

Obfuscated CSS class names == smaller bundle size == less amount of data to transfer over network.

If you use BEM (which is still awesome and very relevant, mainly because of modifier concept) you can imagine how long class names can be (most of the time longer and meaningful naming in programming can lead to much better readability). There are many use-cases where one HTML element need to have multiple CSS classess which in BEM can end up looking like this.

In our use-case we managed to reduce size of the our CSS bundle by 28%

JS bundle is reduced by some % as well, much less than 28% but still less.

Solution

CSS modules github

CSS modulessolve the encapsulation problem in CSS. Which is the main cause of cascade related pain that FE devs experience. Global namespace in UI was can be compared to the global scope in JS. I don’t need to stress out how important it is to avoid using global vars in any serious application…

Note:Since CSS modules do not care about how you organize your CSS any methodology such is mentioned BEM should still be applied.

So lets start with implementation!

Button.css

.button {
  font-size: 20px;
  color: black;
}
.button--color-red {
  color: red;
}
.button--active {
  color: green;
}

Button.js

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import styles from './css/Button.scss';
const cx = classNames.bind(styles);
const Button = ({ label, color, isActive }) => {
  const cssClasses = cx({
    'button': true,
    'button--color-red': (color === 'primary'),
    'button--active': isActive,
  });
return (
    
  );
};
Button.propTypes = {
  label: PropTypes.string,
  color: PropTypes.string,
  isActive: PropTypes.bool,
};
export default Button;

webpack.config.js / loaders section

{ 
  test: /.css$/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[sha1:hash:hex:4]'
      }
    }
  ]
}

modulesproperty tells Webpack that class names needs to be obfuscated. You can set it to false in dev build and class names will stay the same as in CSS file. That is very useful for development.

localIdentNameproperty is configuration for the format of the class names after obfuscation. [sha1:hash:hex:4] — this configuration will output 4 letter class names encoded with sha1. You can define it to work how ever you like…

Alternative

If you don’t like classnames appraoch, feel free to try react-css-modules . Both ways of solving the CSS class names obfuscation are legit.

If you need assistance with the topic feel free to contact me on Twitter

https://twitter.com/develoger

稿源:JavaScript Live (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » How to obfuscate CSS class names with React and Webpack

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录