CSS in JS & css-modules

[xgqfrms-GitHub]

CSS in JS & css-modules

https://github.com/airbnb/react-with-styles

https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e

https://speakerdeck.com/vjeux/react-css-in-js

https://github.com/css-modules/css-modules

/* Thumbnail.css.js */
export default {
    image: {
        borderRadius: '3px'
    }
}

/* Thumbnail.jsx */
import styles from './Thumbnail.css.js';

render() {
    return(
        <img className={styles.image}/>
    );
}

/* Rendered DOM */
<img style="border-radius: 3px;"/>

---

testing ???

import * as CSSinJS from './styles.css';
// ???

// CSSinJS.css1

<div className={CSSinJS.css1}>
    <h1>CSS in JS </h1>
</div>

import logo from '../img/logo.png';
import './App.css';

[xgqfrms-GitHub]

OK demo

auto class hash_name

/* Thumbnail.css */
.image {
    border-radius: 3px;
}

/* Thumbnail.jsx */
import styles from './Thumbnail.css';

// import * as CSSinJS from './styles.css';

render() {
    return(
        <img className={styles.image}/>
    );
}

/* Rendered DOM */
<img class="Thumbnail__image___1DA66"/>

/* Processed Thumbnail.css */
.Thumbnail__image___1DA66 {
    border-radius: 3px;
}

https://speakerd.s3.amazonaws.com/presentations/2e15908049bb013230960224c1b4b8bd/css-in-javascript.pdf

https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e

[xgqfrms-GitHub]

Bad Demo

inline style CSS

/* Thumbnail.css.js */
export default {
    image: {
        borderRadius: '3px'
    }
}

/* Thumbnail.jsx */
import styles from './Thumbnail.css.js';

render() {
    return(
        <img className={styles.image}/>
    );
}

/* Rendered DOM */
<img style="border-radius: 3px;"/>

[xgqfrms-GitHub]

http://weipan.ketongtx.com/microtrade/static/crm/index.html#/order

[xgqfrms-GitHub]

/*

.css-in-js-h1 {
    color: #0f0;
    font-size: 2rem;
    text-shadow: 3px 3px #000;
    background: rgba(255, 255, 255, 0.7);
}

.css_in_js_h1 {
    color: #0f0;
    font-size: 2rem;
    text-shadow: 3px 3px #000;
    background: rgba(255, 255, 255, 0.7);
}

*/

import styles from './Item1.css';
// css in js

<span className={styles.css_in_js_h1}>
    CSS in JS Testing
</span>
<span className="css-in-js-h1">
    className Testing
</span>

CSS Modules

https://github.com/css-modules/css-modules

CSS模块是一个CSS文件，默认情况下，所有类名和动画名称都在本地范围内。

[xgqfrms-GitHub]

https://github.com/MicheleBertoli/css-in-js

[xgqfrms-GitHub]

webpack

css-loader?modules

https://github.com/webpack/css-loader

https://github.com/css-modules/webpack-demo

https://github.com/css-modules/css-modules/blob/master/docs/get-started.md#webpack

$ npm i -D css-loader

[xgqfrms-GitHub]

webpack.config.js

https://github.com/webpack-contrib/css-loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

[xgqfrms-GitHub]

CSS Modules Webpack Demo

https://github.com/css-modules/webpack-demo

$ npm i
$ npm start & open http://localhost:8080

[xgqfrms-GitHub]

https://github.com/webpack/style-loader

https://github.com/airbnb/react-with-styles

[xgqfrms-GitHub]

sass-loader node

[xgqfrms-GitHub]

CSS :nth-of-type

/* 
2n+1 

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

:nth-of-type(2n)
*/