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

时间:2022-09-05 22:39:35

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

  引子:

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

  假如你现在只是做自己的一个小博客,那么就需要你有自己的个性,因为博客相当于你个人的代言,那么很多都是个性化的,而且需要你独自一人慢慢打造出适合自己的风格。不过,大多数的时候是在工作中,对于工作中,就要考虑两个字--合作,面对一个需要大家合作才能尽快完成的项目,这就需要模块化的思想了,大家需要一个共同的标准,有一个共享库,不在是个性化的代码,而是便于团队成员阅读和维护的优雅代码。由于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

通过如下代码:

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

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

在各浏览器的结果如下:

ie6:

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

ie7

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

ie8

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

Firefox38.0.1

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

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

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

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

常用的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

指南:guild

服务:service

注册:regsiter

状态: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

指南:guild

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

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

选择器

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

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

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

From: http://www.cnblogs.com/WebShare-hilda/p/4686067.html

CSS模块化思想-----命名是个技术活的更多相关文章

  1. css模块化思想(一)--------命名是个技术活

    引子: 女孩子都喜欢买衣服,而我也不例外,奈何钱包太瘦,买不起高大上的定制,只能买撞衫率极高的休闲衣,不过对于我来说,我还是开心的,毕竟买衣服买的不仅是衣服,更是一种心情.在web前端的世界里,css ...

  2. css模块化思想(一)

    什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种 处理复杂系统分解成为更 ...

  3. css模块化及CSS Modules使用详解

    什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...

  4. css 模块化

    什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好 ...

  5. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  6. 谈 CSS 模块化

    以前看过模块化的相关资料以及解释,对模块化有了一个表皮的了解,自己也做了一些相关的实践,由于接触到的项目交小,所以也没能更好的去体现和理解模块化,但总体还是有那么一些感悟,但是如果要说怎么才能算是好的 ...

  7. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  8. React(八)样式及CSS模块化

    (1)内联样式 注:样式要采用驼峰命令发,如果非要使用原生css样式写法,需加引号 缺点:一些动画,伪类不能使用 class App extends Component { constructor(p ...

  9. CSS学习笔记(7)--html页面的CSS、DIV命名规则

    html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...

随机推荐

  1. C++知识回顾(一)

    感觉世界都是约定好的,每门语言的第一个程序总是Hello World!但是也有一些书似乎是在追求个性,会用一些其他的,但是是Not Hello World!本人需要再学习一下C++,所以从最基础的开始 ...

  2. Android开源框架:NineOldAndroid

    在android3.0以前的版本,要实现动画,一般是使用NineOldAndroid开源框架,之后,就可以直接使用android提供的animation API了. 仔细看过此开源框架后,可看出此框架 ...

  3. Vim 快捷键整理

    一.移动光标 1.左移h.右移l.下移j.上移k 2.向下翻页ctrl + f,向上翻页ctrl + b 3.向下翻半页ctrl + d,向上翻半页ctrl + u 4.移动到行尾$,移动到行首0(数 ...

  4. 网易邮箱前端Javascript编码规范:基础规范

    在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...

  5. NDN路由--OSPFN安装与配置

    现在的IP网络的问题已经暴露的很多了,各种改进的网络架构与设想非常多,但其中以基于内容为中心的网络发展最为迅速,其中,NDN的架构最为完整,代码也比较成熟.OSPFN是基于CCNX的,所以之前要安装C ...

  6. hdu4513(manacher)

    传送门:吉哥系列故事——完美队形II 题意:求最长回文队伍且队伍由中间向两边递减. 分析:manach算法小应用,在判断回文子串向两边递减时加点限制使回文是由中间向两边递减的. #pragma com ...

  7. 基于FPGA驱动VGA显示图片的小问题

    学习VGA显示图片的过程中,遇到了一个小问题,我在显示屏上开了一个60x60的框,放了一张图片进去显示,但是最终的结果如下图所示. 出现了一个竖黑边,看了看代码,分析了一下逻辑没问题,然而看这个显示那 ...

  8. [翻译] ASP.NET Core 2.2 正式版发布

    本文为翻译,原文地址:https://blogs.msdn.microsoft.com/webdev/2018/12/04/asp-net-core-2-2-available-today/ 我(文章 ...

  9. C#发送带附件的邮件的代码

    如下的代码是关于C#发送带附件的邮件的代码. MailMessage m = new MailMessage();m.Subject = "File attachment!";m. ...

  10. [leetcode]Simplify Path @ Python

    原题地址:https://oj.leetcode.com/problems/simplify-path/ 题意: Given an absolute path for a file (Unix-sty ...