取名是个技术活

  正篇:

怎么是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,火狐,谷歌(Google),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

通过如下代码:

图片 1

图片 2

在各浏览器的结果如下:

ie6:

图片 3

ie7

图片 4

ie8

图片 5

Firefox38.0.1

图片 6

360结出,谷歌(Google) Chrome,safari,opera结果同样如下:

图片 7

 

从上边直观的询问到采取器的命名在各浏览器下的支撑意况有所不一样。由此,倘若选拔器的命名不标准,将影响各浏览器下的渲染效果。为了同盟以上的浏览器,省麻烦,我们尽量命名以字母初阶。可以确保都至极。

常用的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
    名称中只好冒出小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关
    class 的命名(类似于命名空间)(例如,.btn 和 .btn-danger)。
  • 防止过度任意的简写。.btn 代表 button,但是 .s 不可能发挥任何意思。
  • class 名称应当尽量短,并且意义同理可得。
  • 行使有含义的名目。使用有集体的或目标明显的名号,不要接纳表现方式(presentational)的称号。
  • 依据如今的父 class 或宗旨(base) class 作为新 class 的前缀。
  • 使用 .js-* class 来标识作为(与体制绝对),并且毫不将那么些 class
    包括到 CSS 文件中。

 

图片 8

选择器

  • 对于通用元素选择 class ,那样便于渲染品质的优化。
  • 对此平常出现的零部件,幸免使用性质拔取器(例如,[class^="..."])。浏览器的质量会遭逢这一个因素的熏陶。
  • 拔取器要尽量短,并且尽量限制组成采纳器的要素个数,指出并非跨越 3
  • 只有在要求的时候才将 class
    限制在新近的父元素内(也就是儿孙选拔器)(例如,不接纳带前缀的 class
    时 — 前缀类似于命名空间)。

图片 9

 

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

 

卓殊洋洋得意能跟大家一块儿享受,一起学学,明日就写到那里了,因为自身水平有限,有不当的地点,欢迎指正,谢谢啦!—妙瞳。

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