css 模块化

什么是css模块化思想？(what)

为了理解css模块化思想，我们首先了解下，什么是模块化，在百度百科上的解释是，在系统的结构中，模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件，来处理复杂、大型的软件。看完模块化，是不是有种拼图的即视感，可以把大图分成各个小图，然后把小图拼成大图，分与合的艺术感。那么css模块化思想，也就是在css编写环境中，用上模块化的思想，把一个大的项目，分解成独立的组件，不同的组件负责不同的功能，最后把模块组装，就成了我们要完成的项目了。

为什么需要css模块化?(why)

当做一个大项目，几个人团队合作开发，结果看不懂彼此的代码，怎么办，当面对前人已经写好代码，需要修改，可是无处下手，怎么办.当代码耦合，修改费时费力，怎么办，当需要迭代，面对庞大的代码，牵一发动全身的悲催时刻，怎么办，这个时候，模块化思想就是救星了。css写法特别的灵活，也因为灵活，所以容易耦合在一起，这时候就需要进行模块化的分离。那么css模块化的好处多多，列举了一些如下：

　　　　提高代码重用率

　　　　提高开发效率、减少沟通成本

　　　　提高页面容错

　　　　降低耦合

　　　　降低发布风险

　　　　减少Bug定位时间和Fix成本

　　　　更好的实现快速迭代

　　　　便于代码维护

　　　　。。。。。。

怎样实现css模块化？（how）

　　　　要实现css模块化需要很多步，今天我们就说说第一步，命名。

　　　　看别人的代码，就好像进入对方的军事基地一样，要想里面的武器用的得心应手，首先得知道每个武器的名字，假如你的武器都是取的不三不四，那么就算来到了基地，估计也不敢动你的武器了，更别提战斗了，所以，要规范我们在css中的命名，尽量做到团队成员能一看就懂。

　　　　css命名上的优化可以分为css文件名的命名，以及css选择器的命名。

css样式文件名：

1）　

主要的 master.css 
布局，版面 layout.css 
专栏 columns.css 
文字 font.css 
打印样式 print.css 
主题 themes.css

2）

reset.css // 对浏览器的默认样式进行重设 
layout.css // 管理页面的布局 
typeset.css // 图文的编排
color.css // 统一管理颜色的搭配 
print.css // 打印效果样式 
ie.css // 把对ie的hack单独分开

3）

reset.css 
header.css // 头部的所有样式 
container.css // 除头部/底部外的中间区域样式 
footer.css // 底部样式 
print.css 
ie.css

4)

reset.css /*页面样式充值*/
header.css /*全站头部样式*/
footer.css /*全站尾部样式*/
public.css /*全站公共模块样式*/
index.css /*首页特有样式*/
container.css /*二级及以下主体样式*/
print.css /*打印样式*/
ie.css /*IE hack*/

等等

还是那句话，没有最好的命名方式，只有最合适的命名方式。主要就是从html结构和bug的快速定位和便于其他成员的修改上去考虑。

假如你的网站是新闻类的门户网站，然后html的结构就主要是布局，版面 layout.css ，专栏 columns.css ，文字 font.css ，打印样式 print.css 就比较适合，因为跟html很一致，也很契合。

假如是企业官网的话，一般html结构都是头和尾都有标准的，所以与html结构最契合的就是第三种了，同时我们可以优化第三种，在container里面再分类，分成common,layout，就方便进一步的修改，至于common里就可以放入font,color一些公用的样式。

没有完美的生活，也没有完美的人，所以也没有完美的文件命名，只有尽量做到与html布局契合，然后重在从每次的项目中反省，总结，条条大路通罗马，能抓住老鼠的就是好猫。

css选择器的命名：

规范css选择器的命名，是个老生常谈的问题，对它的规范，不仅是模块化实现的一环，便于团队开发，同时也规避了一些兼容性的麻烦。因为各个浏览器，IE，火狐，谷歌，safari

，每个浏览器,IE产品，火狐，safari,coogle Chrome，都会因为命名不规范会产生不同样式..

所有的CSS语法是不区分大小写的ASCII范围（即，i.e., [a-z] and [A-Z]是等价的）中，除了部分不属于CSS的控制之下。例如，在HTML中值的区分大小写属性“ID”的字体名称和“class”，和URI就在于本规范的范围之内。请特别注意，元素名称是不区分大小写的HTML，但区分大小写的XML。
在CSS中，标识符（包括元素名称，类别，并在选择的ID）只能包含字符[A-ZA-Z0-9]和ISO 10646字符U + 00A0高，加上连字符（ - ）和下划线（ _）;他们不能以数字开头，两个连字符，或一个连字符后跟数字。标识符也可以包含转义字符和任何ISO 10646字符作为一个数字代码（见下项）。例如，识别符“B&W?”可被写为“B \＆W \？”或“B \ 26Wˉˉ\ 3F”。请参考W3C CSS2.1的4.1.3节,链接地址：http://www.w3.org/TR/CSS21/syndata.html#characters

通过如下代码：

在各浏览器的结果如下：

ie6:

ie7

ie8

Firefox38.0.1

360结果，Google Chrome，safari,opera结果一致如下：

从上面直观的了解到选择器的命名在各浏览器下的支持情况有所不同。因此，如果选择器的命名不规范，将影响各浏览器下的渲染效果。为了兼容以上的浏览器，省麻烦，我们尽量命名以字母开头。可以保证都兼容。

常用的css命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guide

服务：service

注册：register

状态：status

投票：vote

合作伙伴：partner

(二)注释的写法:

/* Header */

内容区

/* End Header */

(三)id的命名:

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：register

搜索：search

功能区：shop（如购物车）

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guide

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

（2）字体大小,直接使用”font+字体大小”作为名称,如

.font10px { font-size: 10px; }

.font6pt {font-size: 6pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事项::

  1. 一律小写;
  2. 尽量用英文;
  3. 不加中杠和下划线;
  4. 尽量不缩写；

我比较喜欢bootstrap的简洁优雅的风格。所以css命名也可以参考一下。

特别是class命名：

  • class 名称中只能出现小写字符和连字符（不是下划线，也不是驼峰命名法）。连字符应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
  • 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
  • class 名称应当尽可能短，并且意义明确。
  • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
  • 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
  • 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

选择器

  • 对于通用元素使用 class ，这样利于渲染性能的优化。
  • 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
  • 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
  • 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

css编码规范可以参考http://codeguide.bootcss.com/

非常高兴能跟大家一起分享，一起学习，今天就写到这里了，因为本人水平有限，有错误的地方，欢迎指正，谢谢啦！---妙瞳。

时间： 2024-10-13 21:30:37

css 模块化的相关文章

浅谈css模块化

模块化是我们经常听到的一个话题,那什么是模块化呢?从字面意义上我们大概能对它有个初步的判断,那么我今天就根据我自己的想法谈谈css模块化. 背景:起初的css长什么样? /* index.css */ body { margin: 0; padding: 0; font-size: 18px; } .box { background: #333; color: #fff; } .box .list { margin-left: 10px; } .box .list .item { border-

css模块化思想（一）--------命名是个技术活【转】

正篇: 什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方式.它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立.互相作用的组件,来处理复杂.大型的软件.看完模块化,是不是有种拼图的即视感,可以把大图分成各个小图,然后把小图拼成大图,分与合的艺术感.那么css模块化思想,也就是在css编写环境中,用上模块化的思想,把一

谈 CSS 模块化

以前看过模块化的相关资料以及解释,对模块化有了一个表皮的了解,自己也做了一些相关的实践,由于接触到的项目交小,所以也没能更好的去体现和理解模块化,但总体还是有那么一些感悟,但是如果要说怎么才能算是好的模块化,自己内心还是一个疑问. 前几天接到一个电话面试,谈到了css模块化的问题,觉得自己的回答太模棱两可,自己回答过后对自己的答案也不满意,没有一个周全的思考和考虑. 下面总结一下自己对css模块化的理解,尽可能的表达完善自己的想法以及对所查找到的资料的一个总结. ————————————————

CSS模块化思想-----命名是个技术活

CSS模块化思想(一)--------命名是个技术活 引子: 女孩子都喜欢买衣服,而我也不例外,奈何钱包太瘦,买不起高大上的定制,只能买撞衫率极高的休闲衣,不过对于我来说,我还是开心的,毕竟买衣服买的不仅是衣服,更是一种心情.在web前端的世界里,css里也充满了生活的艺术,都说,艺术源于生活,却高于生活,是对生活的一种升华,那么在css里,是个性化的定制好,还是模块化的量产好呢?这就要看各个项目了,这是一种权衡,一切离不开一个度,这世上没有最好的,只有最适合自己的,在web前端的世界里亦是如此

谈CSS模块化【封装-继承-多态】

第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上,当时我还想,“哈,CSS也有模块化,我没听错吧?”事实上,我没听错,你也没看错,早就有CSS模块化这个概念了.之所以我把这个拿出来讨论,是因为一个算是比较大的项目出现了一些重构上的危机,因此引发了我们对页面重构中的CSS进行模块化的思考. 首先,什么是CSS模块化?在谈CSS模块化之前我们先看一下百度百科对模块化的解释: “模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程.每个模块完成一个特定的

css模块化思想（一）

什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种 处理复杂系统分解成为更好的可管理模块的方式.它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立.互相作用的组件,来处理复杂.大型的 软件.看完模块化,是不是有种拼图的即视感,可以把大图分成各个小图,然后把小图拼成大图,分与合的艺术感.那么css模块化思想,也就是在css编写环 境中,用上模块化的思想,把一个

好程序员web前端学习路线分享css模块化方案

好程序员web前端学习路线分享css模块化方案,这篇文章主要介绍了css模块化方案,css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案,非常具有实用价值,需要的小伙伴可以参考下. css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案.oocss面对对象的规则,主要的原则是两种:分离结构和外观,分离容器和内容.名词解释1.分离结构和外观:增加可重复的设计单元,同时去推进产品和ui对这方面的思考,比如下面的css使用时对象模式的命名和模块化规则.2.分离容器和内容:

CSS模块化设计——从空格谈起

引子: 今天在蓝点看了Yang的博客<CSS样式表中继续关系的空格与不空格>,思考了一下,本来想写<CSS样式的复合定义与复合调用及简单的模块化设计>,但是内容太大,还是来点简单的实惠.所以改叫<CSS样式--从空格谈起>吧.鞍山治疗白癜风的偏方www.0412r.com 一.空格运算符 (1)CSS语言 简单地说,CSS语言类似JS语言,是通过客户端下载后,通过本地浏览器解析.而CSS语言又是非常低级的"弱类型"语言,离JS这种基于对象的比较完善的

webpack css模块化和ant-design按需加载冲突

其实具体出现了什么问题,我也记得不清楚了,今天突然回想起来必须记录一下,一个思想就是用exclude将node_module目录下的文件排除,网上有很多相关例子,但不知是不是因为时间久远,都不生效,无奈,又只好啃回官方文档,我的解决方式如下 webpack正常打包的话,所有的css都会被打包在一起,造成css的全局污染,我们可以采用模块化的方式,其实就是借用hash改变类或id名 webpack.config.js module: { rules: [ { test: /\.(js|jsx)$/