前端人员必看CSS命名规范

  干为前端的设计人员,关于CSS的接触,就像吃米饭壹样。因此CSS命名规范 命名是 前端人员必看的。

  文字整顿理了Web前端开辟中的各种CSS规范,带拥有文件规范、注释规范、命名规范、书写规范、测试规范等。

  壹、文件规范1、文件均归档到商定的目次中。详细要寻求经度过豆瓣的CSS规范终止说皓:所拥局部CSS分为两父亲类:畅通用类和事情类。畅通用的CSS文件,放在如次目次中:

  事情类的CSS是指和详细产品相干的文件,放在如次目次中:

  外面联CSS文件使用于全站级和产品级畅通用的父亲文件。内联CSS文件使用于在壹个或几个页面共用的CSS。佩的壹对详细的CSS终止文档募化的整顿理。如:

  - util-01 reset /css/core/reset.css

  - util-02 畅通用模块容器 /css/core/mod.css

  - ui-01. 喜乐按钮 /css/core/fav_btn.css

  - ui-02. 视频/相册列表项 /css/core/media_item.css

  - ui-03. 评星 /css/core/rating.css

  - ui-04. 畅通用按钮 /css/core/common_button.css

  - ui-05. 分页 /css/core/pagination.css

  - ui-06. 伸荐按钮 /css/core/rec_btn.css

  - ui-07. 老版会话框 /css/core/old_dialog.css

  - ui-08. 老版Tab /css/core/old_tab.css

  - ui-09. 老版成员列表 /css/core/old_userlist.css

  - ui-10. 老版信息区 /css/core/notify.css

  - ui-11. 社区用户带航 /css/core/profile_nav.css

  - ui-12. 以后父亲社区带航 /css/core/site_nav.css

  - ui-13. 加以载中 /css/lib/loading.css

  2、文件伸入却经度过外面联或内联方法伸入。

  - 外面联方法:(典型音皓type=”text/css”却以节微)

  - 内联方法: (典型音皓type=”text/css”却以节微)

  link和style标注签邑应当放入head中,绳墨上,不容许在html上直接写样式。备止在CSS中运用@import,嵌套不要超越壹层。

  3、文件名、文件编码及文件父亲小

  - 文件名必须由小写字母亲、数字、中划线结合

  - 文件必须用UTF-8编码,运用UTF-8(匪BOM),在HTML中指定UTF-8编码,在CSS中则不需寻求特佩指定鉴于默许坚硬是UTF-8。

  - 单个CSS文件备止度过父亲(建议微少于300行)

  二、注释规范

  1、文件顶部注释(伸荐运用)

  -

  骈制代码2、模块注释

  -

  - …

  -

  骈制代码模块注释必须孤立写在壹行

  3、 单行注释与多行注释

  单行注释却以写在孤立壹行,也却以写内行条,注释中的每壹行长度不超越40个中国字,容许80个英文字符。多行注释必须写在孤立行内

  4、特殊注释

  用于标注注修改、待办等信息

  5、区块注释

  -

  -

  -

  骈制代码对壹个代码区块注释(却选),将样式语句子分区块并在新行中对其注释。

  叁、命名规范

  使

  用拥有意思的或畅通用的ID和class命名:ID和class的命名应反应当元斋的干用或运用畅通用名称,而不要用笼统的流动畅的命名。反应元斋的运用目的是首

  选;运用畅通用名称代表该元斋不表特定意思,与其同事元斋无异,畅通日是用于辅弼命名;运用干用性或畅通用的名称却以更使用于文档或模版变募化的情景。

  - #yee-1901 {}

  - .button-green {}.clear {}

  - #gallery {}#login {}.video {}

  - .aux {}.alt {}

  日 用命名(多记多查英文单词):page、wrap、layout、header(head)、footer(foot、ft)、

  content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、

  title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、t日博官网s等

  ID和class命名越长越好,条需趾够表臻涵义。此雕刻么既然拥有助于了松,也能提高代码效力。

  - #navigation {}.atr {}

  - #nav {}.author {}

  典型选择器备止同时运用标注签、ID和class干为定位壹个元斋选择器;从干用上考虑也应充分增添以选择器的层级。

  - ul#example {}div.error {}

  - #example {}.error {}

  命名时需寻求剩意的点:

  - 规则命名中,壹律采取小写加以中划线的方法,不容许运用父亲写字母亲或 _

  - 命名备止运用华语合并音,应当采取更信皓拥有语义的英文单词终止构成

  - 命名剩意收缩写,条是不能己觉收缩写,详细请拜见日用的CSS命名规则

  - 不容许经度过1、2、3等前言号终止命名

  - 备止class与id重名

  - id用于标注识模块或页面的某壹个父亲容器区域,名称必须独壹,不要恣意新建id

  - class用于标注识某壹个典型的对象,命名必须言信意赅。

  - 尽能提高代码模块的骈用,样式充分用构成的方法

  -

  规则名称中不该该包罗色(red/blue)、定位(left/right)等与详细露示效实相干的信息。应当企图义命名,而不是样式露示结实命名。

  1、日用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

  - 报户口:regsiter

  - 搜索:search

  - 干用区:shop

  - 题目:title

  - 参加以:joinus

  - 样儿子:status

  - 按钮:btn

  - 滚触动:scroll

  - 标注签页:tab

  - 文字列表:list

  - 提示信息:msg

  - 以后的: current

  - 小技巧:t日博官网s

  - 图标注: icon

  - 注释:note

  - 指南:guild

  - 效力动:service

  - 暖和点:hot

  - 成事:news

  - 下载:download

  - 开票:vote

  - 合干同伙:partner

  - 情谊链接:link

  - 版权:copyright

  四、书写规范

  1、排版规范(1)运用4个空格,而不运用tab容许混用空格+tab干为收缩进;(2)规则却以写成单行,容好多行,条是整顿个文件内的规则排版必须壹致;单行方法书著干风的排版条约束

  - 假设是在html中写内联的css,则必须写成单行;

  - 每壹条规则的父亲括号 { 前后加以空格 ;

  - 每壹条规则完一齐的父亲括号 } 前加以空格;

  - 属性名冒号之前不加以空格,冒号之后加以空格;

  - 每壹个属性值后必须添加以分号; 同时分号后空格;

  - 多个selector共用壹个样式集儿子,则多个selector必须写成多行方法 ;

  多行方法书著干风的排版条约束

  - 每壹条规则的父亲括号 { 前添加以空格;

  - 多个selector共用壹个样式集儿子,则多个selector必须写成多行方法 ;

  - 每壹条规则完一齐的父亲括号 } 必须与规则选择器的第壹个字符对齐全 ;

  - 属性名冒号之前不加以空格,冒号之后加以空格;

  - 属性值之后添加以分号;

  2、属性编写以次

  - 露示属性:display/list-style/position/float/clear …

  - 本身属性(盒模具):width/height/margin/padding/border

  - 背景:background

  - 行高:line-height

  -

  文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

  - 其他:cursor/z-index/zoom/overflow

  - CSS3属性:transform/transition/animation/box-shadow/border-radius

  - 假设运用CSS3的属性,假设拥有必要参加以阅读器前缀,则依照 -webkit- / -moz- / -ms- / -o- /

  std的以次终止添加以,规范属性写在最末。

  - 链接的样式请严峻依照如次以次添加以: a:link -> a:visited -> a:hover -> a:active

  3、规则书写规范

  - 运用单伸号,不容许运用副伸号;

  - 每个音皓完一齐邑应当带壹个分号,无论是不是最末壹个音皓;

  - 摒除16进制色和字体设置外面,CSS文件中的所拥局部代码邑应当小写;

  - 摒除了重置阅读器默许样式外面,避免避免直接为html tag添加以css样式设置;

  - 每壹条规则应当确保选择器独壹,避免避免直接为大局.nav/.header/.body等类设置属性;

  4、代码干用优募化

  - 侵犯margin、padding、border的-left/-top/-right/-bottom的设置,充分运用短名称。

  - 选择器应当在满意干用的基础上充分长,增添以选择器嵌套,查询消费。条是壹定要备止掩饰大局样式设置。

  - 剩意选择器的干用,不要运用低干用的选择器。

  - 避免避免在css中运用*选择符。

  - 摒除匪必须,不然,普畅通拥有class或id的,不需寻求又写上元斋对应的tag。

  - 0前面不需寻求单位,譬如0px却以节微成0,0.8px却以节微成.8px。

  - 假设是16进制体即兴色,则色取值应当父亲写。

  - 假设却以,色充分用叁位字符体即兴,比如#AABBCC写成#ABC 。

  - 假设没拥有拥有边框时,不要写成border:0,应当写成border:none 。

  - 充分备止运用AlphaImageLoader 。

  - 在僵持代码松耦的前提下,充分兼偏重骈的样式。

  - background、font等却以收缩写的属性,充分运用收缩写方法 。

  5、CSS Hack的运用

  请不用触动不触动就运用阅读器检测和CSS

  Hacks,先试试佩的处理方法吧!考虑到代码高效力和善办,固然此雕刻两种方法能快快处理阅读器松析差异,但应被视为最末的顺手眼。在临时的项目中,容许运用hack条会带到来更多的hack,你越是运用它,你越是会依顶赖它!

  伸荐运用下面的:

  

  [/url]

  6、字体规则

  - 为了备止文件侵犯及编码替换时形成效实,建议将样式华语字体名字改成对应的英文名字,如:黑体(SimHei) 宋体(SimSun) 微绵软雅黑

  (Microsoft Yahei,几个单词中间男拥有空格结合的必须加以伸号)

  - 字体粗细采取详细数值,粗体bold写为700,正日normal写为400

  -

  font-size必须以px或pt为单位,伸荐用px(注:pt为打印版字体父亲小设置),不容许运用xx-small/x-small/small/medium/large/x-large/xx-large等值

  - 为了对font-family取值终止壹致,更好的顶持各个操干体系上各个阅读器的兼容性,font-family不容许在事情代码中恣意设置

  五、其他规范

  - 不要遂便改触动全站级CSS和畅通用CSS库。改触动后,要经度过片面测试。

  - 备止运用filter

  - 备止在CSS中运用expression

  - 备止度过小的背景日博官网平铺。

  - 充分不要在CSS中运用!important

  - 对立不要在CSS中运用”*”选择符

  -

  层级(z-index)必须皓晰皓白,页面弹窗、气泡为最初级(最初级为999),不一弹窗气泡之间却在叁位数之间调理;普畅通区块为10-90内10的倍数;区块展开、弹出产为以后父亲层级上个位添加以,避免避免层级间己觉攀比。

  - 背景日博官网请尽能运用sprite技术, 减小http央寻求, 考虑到多人合干开辟, sprite依照模块、事情、页面到来瓜分均却。

  六、测试规范

  1、了松阅读器特效顶持为了页面干用考虑,假设阅读器不顶持CSS3相干属性的,则该阅读器的某些特效将不又顶持,属性的顶持情景如次表所示(Y为顶持,N为不顶持):

  2、 设定阅读器顶持规范

  

  - A级-提交互和视觉完整顿符全设计的要寻求

  - B级-视觉上容许拥有所差异,但不破开变质页面的所拥有效实

  - C级-却忽略设计上的底细,但不备碍运用

  3、日用样式测试器

  W3C CSS validator:http://jigsaw.w3.org/css-validator/

  CSS Lint:http://csslint.net/

  CSS Usage:https://addons.mozilla.org/en-us/firefox/addon/css-usage/

  原文链接:http://www.86y.org/art_detail.aspx?id=740

Related Posts

发表评论

电子邮件地址不会被公开。 必填项已用*标注

友情链接:

bet36备用 皇家88娱乐 ag视讯 365bet 澳门赌博网站