取名是个技术存(转)

  正篇:

哟是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

经过如下代码:

澳门新莆京23819com 1

澳门新莆京23819com 2

当列浏览器的结果如下:

ie6:

澳门新莆京23819com 3

ie7

澳门新莆京23819com 4

ie8

澳门新莆京23819com 5

Firefox38.0.1

澳门新莆京23819com 6

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

澳门新莆京23819com 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)。
  • 免超负荷任意的简写澳门新莆京23819com。.btn 代表 button,但是 .s 不克发表任何意思。
  • class 名称应当尽量少,并且意义不言而喻。
  • 下有含义之称谓。使用有团体的或者目的显然的名,不要采用表现形式(presentational)的号。
  • 因最近的父 class 或核心(base) class 作为新 class 的前缀。
  • 使用 .js-* class 来标识作为(与体相对),并且永不用这些 class
    包含到 CSS 文件被。

 

澳门新莆京23819com 8

选择器

  • 对此通用元素以 class ,这样方便渲染性能的优化。
  • 对经常出现的零件,避免下性质选择器(例如,[class^="..."])。浏览器的习性会蒙这些元素的震慑。
  • 选择器要尽可能少,并且尽量限制组成选择器的素个数,建议不用跨越 3
  • 只有在必要的时候才将 class
    限制在近日之父元素内(也就是是后人选择器)(例如,不采用带来前缀的 class
    时 — 前缀类似于命名空间)。

澳门新莆京23819com 9

 

css编码规范好参照http://codeguide.bootcss.com/

 

非常高兴能与大家齐声享用,一起学习,今天虽形容及此了,因为自己水平有限,有错误的地方,欢迎指正,谢谢啊!—妙瞳。

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