资讯专栏INFORMATION COLUMN

Css Module介绍

imingyu / 1720人阅读

摘要:的规则是全局的,任何一个组件的样式规则,都对整个页面有效。相信写的人都会遇到样式冲突污染的问题。自动生成的类名基本就是唯一的,大大降低了项目中样式覆盖冲突的几率。关于更详细的介绍可以参考这篇博客

CSS 的规则是全局的,任何一个组件的样式规则,都对整个页面有效。相信写css的人都会遇到样式冲突(污染)的问题。

在App.js中我们引入子组件Child和style.css

import React from "react";
import Child from "./Child";
import "./style.css";

const App = () => {
  return (
    

hello

) } export default App;

style.css

.aaa {
    background-color: red;
}

然后Child中又引入了style1.css文件, 我们一不小心把style1.css中的样式又写成了aaa,按照预期的结果App组件的p标签背景色应该是红色,Child组件中的p标签背景色是蓝色,那是不是这样的呢?
child.js

import React from "react";
import "./style1.css";

const Child = () => {
  return (
    

child

) } export default Child;

style1.css

.aaa {
    background-color: blue;
}

我们yarn start启动项目,可以看到页面两个标签都是显示红色

这是因为我们在App中通过这样的方式引入import "./style.css";它的样式作用于全局,如果我们不注意命名的话极有可能造成样式名重复的问题,进而造成上面样式冲突的问题

为了解决全局污染的问题,那就把class命名写长一点吧、加一层父级选择器、降低冲突的几率,那么CSS命名混乱了

CSS 模块化的解决方案有很多,但主要有三类:

(1)、命名约定

规范化CSS的解决方案如:BEM、OOCSS、AMCSS、SMACSS

(2)、CSS in JS

彻底抛弃 CSS,用 JavaScript 写 CSS 规则,styled-components就是其中代表。

安装

npm install --save styled-components

一般在做项目开始时,我们都会定义一些初始化样式,这些样式都是全局有效的,那么使用这个方法该怎么定义这些全局样式呢?

最新版的 styled-components v4 已经将原有的injectGlobal() 方法替换成了createGlobalStyle() ,而且用法也和之前的 injectGlobal 方法不同了

在src下新建一个style.js(注意这里是js后缀而不是css后缀,因为我们要在js中写css)

1、引入新的API createGlobalStyle ,在下面创建一个 GlobalStyle 变量,用 createGlobalStyle 方法把全局样式包裹在其中(包裹css样式使用反引号字符串)

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: "";
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
`;

2、在 src/App.js"中(一般是最外层组件),引入刚刚定义的 GlobalStyle ,然后将 组件放在 render() 中最外层元素下面

import React from "react";
import { GlobalStyle } from "./style";
import Header from "./common/header";

function App() {
  return (
    
); } export default App;

像这样引用好之后,就可以正常使用全局样式啦

上面是使用styled-components工具定义全局样式的方法,那么定义局部样式该如何使用呢?(这里只介绍最简单的用法,具体可以参考官网)
在Header组件所处的文件夹下新建一个自己的样式文件style.js

import styled from "styled-components";
export const HeaderWrapper = styled.div`
    position: relative;
    height: 56px;
    border-bottom: 1px solid #f0f0f0;
    background: red;
`;

上面我们导出了一个标签div,这个标签中带有一些样式,使用styled-components后这个标签也变成了一个组件HeaderWrapper并已导出,接着我们在Header组件中就可以使用这个组件了

import React, { Component } from "react";
import {
    HeaderWrapper
} from "./style";

class Header extends Component {
    render() {
        return (
            
                111
            
        )
    }
}

export default Header;

返回页面可以看到,样式生效

并且通过这种方式生成的样式名是随机的,这样就不会出现样式名冲突的问题,并且这个标签组件HeaderWrapper只在当前Header组件中使用。那么样式就只会在这个Header组件中生效

(3)、使用JS 来管理样式模块

使用JS编译原生的CSS文件,使其具备模块化的能力,代表是CSS Modules

CSS Modules不是将CSS改造的具有编程能力,而是加入了局部作用域、依赖管理,这恰恰解决了最大的痛点。可以有效避免全局污染和样式冲突,能最大化地结合现有 CSS 生态和 JS 模块化能力

webpack 自带的 css-loader 组件,自带了 CSS Modules,通过简单的配置即可使用

在React脚手架工具中,我们通过npm run eject将webpack配置文件暴露出来,找到webpack.config.js文件,在这个地方加上这句

修改webpack配置之后我们需要重启服务,返回页面可以看到之前通过这种方式引入的样式就不生效了import "./style.css";

现在我们要使用需要通过这样引入

import styles from "./style.css";

然后在下面通过这样的方式使用

const App = () => {
  return (
    

hello

) }

同样在Child中

import React from "react";
import styles from "./style1.css";

const Child = () => {
  return (
    

child

) } export default Child;

刷新页面,可以看到虽然两个文件中的样式名都是aaa,但是现在他们之间互不影响

这是因为CSS Modules 对 CSS 中的 class 名都做了处理,使用对象来保存原 class 和混淆后 class 的对应关系。CSS Modules自动生成的class类名基本就是唯一的,大大降低了项目中样式覆盖冲突的几率。

关于CSS Module更详细的介绍可以参考这篇博客(https://segmentfault.com/a/11...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114732.html

相关文章

  • 【Cute-Webpack】Webpack4 入门手册(共 18 章)

    摘要:介绍背景最近和部门老大,一起在研究团队前端新手村的建设,目的在于帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介绍 1. 背景 最近和部门老大,一起在研究团队【EFT - 前端新手村】的建设...

    AlanKeene 评论0 收藏0
  • 前端webpack workflow(二)——Webpack基本使用

    摘要:还可以用作文件加载使用,详细请看。实用命令除了简单运行,还可以添加几个参数,方便部署文件处理。以上仅仅介绍了前端开发最基本的用法,更多参数以及功能使用,参考官网 作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

    roadtogeek 评论0 收藏0
  • 前端webpack workflow(二)——Webpack基本使用

    摘要:还可以用作文件加载使用,详细请看。实用命令除了简单运行,还可以添加几个参数,方便部署文件处理。以上仅仅介绍了前端开发最基本的用法,更多参数以及功能使用,参考官网 作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

    LeexMuller 评论0 收藏0
  • 前端webpack workflow(二)——Webpack基本使用

    摘要:还可以用作文件加载使用,详细请看。实用命令除了简单运行,还可以添加几个参数,方便部署文件处理。以上仅仅介绍了前端开发最基本的用法,更多参数以及功能使用,参考官网 作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

    KevinYan 评论0 收藏0
  • webpack4初学习

    webpack基于node,因此想要学习webpack首先要安装node。webpack4要安装node8.2以上版本。 1、安装webpack 为什么选择本地安装,主要是由于以后介绍热更新这一部分不会报错,如果全局安装热更新就会报错,以本部分为基础依次介绍,保证各部分不会出错。 mkdir webpack-test cd webpack-test npm init //初始化npm,都选择默认,...

    Object 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<