当前位置：文档之家 › CSS命名规范

CSS命名规范

  • 格式：rtf
  • 大小：31.72 KB
  • 文档页数：5

CSS 命名规范css的id与class选择符为设计提供了便利，但也会使得css样式变得多和复杂，如何管理这些css样式便是摆在我们面前的一个问题，然而软件开发的经验为我们提供了一个可学习模仿的例子，软件开发中对于过程/函数/变量的命名经过多年的实践与研究已经有了一套自己的方法，借助这些方法，我们可以根据css的特性设计自己的样式命名规则，帮助我们更好的编写样式，在了解css选择符命名之前，我们先简要了解一下css对于命名的基础使用规则。

在此也说一句，以本人做网站两年的经验觉得，一个网站的整体文件分类页很重要，最终的网页还是以index为名的好，例如我自己做的网站(/index.html)其中的文件都是以文件夹名字归类的，例如（/ye_wu_fan_wei/index.html）就是先以文件夹分类，具体关于html的文件分类问题我会在下一篇文章中发布，敬请关注哈！下面开始充电css吧大小写敏感值得注意的是，xhtml不区分大小写，允许使用大写或小写或任意组合进行编码，css 的样式属性也是如此，我们可以使用大小写的css样式属性，css对于对象选择符如body、td、div也是不区分大小写。

但是css对于id及class选择符名称是区分大小写的。

对于id及class选择符来说class="CONTENT"不等于同css中的.content或.Content。

因此在标识id及class以及编写css样式的时候使用统一的规范来编写自己的样式。

合法字符及组合在css及xhtml中，class及id必须由大写或小写字母开始，随后可以使用任意的字母、数字、连接线或下划线。

合法命名示例如下：content Content CONTENTsite_map site-map_1p_1 p-1非法命名示例如下：2008content _mynav @blue -footer命名建议css虽然算不上是一种程序语言，但是程序语言的命名方式且非常有助于css的使用，良好的命名习惯对于一个Web标准网站的开发来说事半功倍，这里我们将借助于软件开发中常用到的一些命名习惯，结合css的实际应用整理出一些较好的命名习惯供参考使用。

使用具有语义的命名对于网站中的各部分的命名，应当使用较贴近其实际用义的单词进行命名，如对于网站中的导航条，可以使用nav来作为id名称；对于网站地图，可以使用sitemap作为该区域的id名称。

网站是对运营上而言的一个业务综合体，网站上除了基本元素，其它地方几乎都是由网站自身的内容及业务构成，如新闻列表可以使用newslist，下载列表可以使用downloadlist这样的贴近内容本身的命名方式。

css中也有大部分代码用于样式本身的定义，我们也可以结合样式本身的内容进行命名，如色彩样式可以使用颜色名称red及blue等，对于一个虚线框样式，可以使用如dashbox这样的组合词进行命名。

∙ 使用大小写帮助命名如果使用复合词对网站中的元素进行命名，我们可以使用大小写帮助进行命名的优化与记忆，如：newslist可以使用大小写进行改进为NewsList；搜索框searchbox 可以优化为SearchBox通过大小写字母能够帮助我们增加复合单词的可读性。

∙ 使用下划线及连接线帮助命名如果大小写命名仍然不能满足对于代码可读性的需要，可以结合css所支持的下划线及连接线来帮助命名，如上例中的newslist可以使用news_list;searchbox也可以优化为search_box或search-box的形式。

在这里我们列举部分网站设计中常用元素的英文名称或简写，在实际应用中可以使用这些通用名称对网站中元素的命名进行组织∙ 根据网站自身需要定制命名规则网站的设计往往根据网站本身的内容不同而复杂多变，除了具有良好的大小写及单词命名习惯之外，我们有必要根据网站本身的业务特点及样式特点创造具有自己风格的命名方式，最常用的就是根据样式及业务类型来建立命名方式，该方式源于软件开发中变量的命名方式。

在软件开发中，为了区分变量的用途，常常使用"变量类型+变量名称"的命名方式，例如一个用于存放整数数据的变量，可以命名为：nLength(n为int的常用缩写);一个逻辑值可以使用：bEnable(b为bool的常用缩写)这样的命名方式。

css样式对软件开发而言没有那么多复杂的数据类型，但是对于样式来说也有一定的样式类型，我们可以根据样式类型进行命名。

例如，对于一组用于定义字体样式的class，我们可以使用f即font的头一个字母为前缀进行命名，例如：f-white:表示白色字体样式f-red:表示红色字体样式f-bold:表示粗体字体样式对于表格的样式，我们可以使用t或tbl(表格的两种常用缩写)来进行命名，例如：t-header:表格头部样式t-col:表格中表格列的样式根据网站的业务与内容进行命名，如针对新闻频道的一些新闻显示的样式，我们可以使用n或news作为前缀进行样式设计，例如：n-list:新闻列表n-title: 新闻标题通过这样的命名方式，我们可以明确的知道css中每一个class的基本用途，便于我们使用。

在一些css的可视化制作软件Dreamweaver、TopStyle之中，甚至可以通过css选择符的名称在预览框中进行排序以便于设计者查询相关的样式。

有了这样一些带有前缀的自定义命名方式，可以很方便的将一类样式归纳到一起，便于设计与维护。

(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }css样式高级定义：<div class="left red">注意事项::1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写，除非一看就明白的单词.主要的 master.css模块 module.css基本共用 base.css布局，版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.cssCSS命名规范：DIV CSS名称说明网站公用相关Container div #container 容器Layout #layout 布局Header or banner div #head, #header 页头部分Footer div #foot, #footer 页脚部分Navigation list #nav 主导航Sub-navigation list #subNav 二级导航Menu #menu 菜单Sub Menu #submenu 子菜单Left or right side columns #sidebar_a,#sidebar_b左边栏或右边栏Main div #main 页面主体Tag #tag 标签Message #msg #message 提示信息Tips #tips 小技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Search input #searchInput 搜索输入框Search output #search_output 搜索输出和搜索结果相似Search #search 搜索Search bar #searchBar 搜索条Search results #search_results 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #logo LOGOSite information #siteinfo 网站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加入我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Arrow arr/arrow 箭头Little #little 标题Website map #sitemap 网站地图List #list 列表Home page #homepage 首页Sub page subpage 二级页面子页面Toolbar #tool, #toolbar 工具条Next pulls #drop 下拉Next pulls menu #dorpmenu 下拉菜单Status #status 状态电子贸易相关Products .products 产品Products prices .products_prices 产品价格Products description .products_description产品描述Products review .products_review 产品评论Editor's review .editor_review 编辑评论New release .news_release 最新产品Publisher .publisher 生产商Screen shot .screenshot 缩略图FAQ .faqs 常见问题。

合集下载

CSS命名规范_电脑基础知识_IT计算机_专业资料.doc

CSS命名规范_电脑基础知识_IT计算机_专业资料.doc

css命名规范一、引言 (2)1.1目的 (2)1.2 CSS编写注意事项 (2)二、CSS命名规范 (2)2.1文件命名规范 (2)2.2公用样式申明： (2)2.3框架架样式类名命名规范 (3)2.4样式类别命名规范 (4)2.5模块或文档命名规则 (4)2.6色彩、字体、字号等命名规则 (5)三、代码规范 (5)3.1 HTML 代码 (5)3.2 CSS ............................................................................................. 错误！未定义书签。

按住CTRL并单击目录可直接定位引言1.1目的1. 制订本规范的目的是使CSS规范化、统一化。

2. 页面制作人员必须严格遵守此规范。

3. 木规范随时根据需要修订，请注意版木号的变化。

当前为1.0版°1.2 CSS编写注意事项1. 在编写html的时候同时带上class屈性；2. 无css样式时，可让css保留空白；当样式完成后，能直接看到效果，基本不用修改htmlo二、CSS命名规范2.1文件命名规范1. 当公用样式、框架样式内容不是很多时，整站全局样式、公共样式写在同一个css±, 命名为global.css （常用，一般都写一个上就ok）；2. 当公用样式、框架样式内容很多时，可以分为两个css文件，一个文档类的公用样式可以命名为doc.css；一个为框架样式为global.css;2.2公用样式申明：1. 公用样式需保留部分，当然可以进行适当修改使用（比如字体、文字大小、颜色等）:body{ margin :0px; padding :0px; borderzOpx; font-size :12px;font-family:”宋体”；backgroundbody, div, dl, dt, dd, ul, li, hi, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,button, textarea, blockquote,p{ margin: 0; padding: 0; line-height:24px;）img（ borderzOpx;}a{ text-decoration:none; color:#333;}a:hover{ text-decorationzunderline; color:#fOO;}ul,dl{ list-style:none;}table { border-collapse: collapse; border-spacing: 0; border-collapsezcollapse;empty-cell:show;）备注：这里清楚一些本身所带的样式结构、统一样式；1）比如清除掉H标签的字体大小；2）a标签只在鼠标经过的时候才有下划线；3）图片边框为04）Table、p、button 标签没边距5）统一行高、字体大小、字体2.3框架架样式类名命名规范global.CSS公用样式，以下是线框结构颜色（红框为class为wrap）topheadernavleft middle right main mainLt rightleft mainRt footer1. top：顶部模块（顶部横条用于补充、快捷导航或说明文字，可有可无）2. header：头部模块（用于头部放logo等）3. nav:主导航4. wrap：主要内容容器5. left：主要内容左边模块6. middle：主要内容中间模块7. right：主要内容右侧模块8. main：主干模块9. mainleft：靠左主干模块10. mainright：靠右主干模块11. footer：底部模块2.4样式类别命名规范1. logo：网站logo2. nav：导航（只有一级菜单可用，有一级以上用下面规则）3. menu：菜单4. hidden：默认隐藏5. menu-con:菜单内容6. login：登录7. register：注册8. search:搜索9. keyword：搜索关键字10. range：搜索范围11. tag-title：标签标题12. tag-con：标签内容13. title：标题14. content：内容15. list：列表16. current：当前位置17. icon：图标18. comment：评论19. more：更多2.5模块或文档命名规则规则：［页面・］模块-具体内容，中间用短横线区分如1： college.css （未缩写）命名规则：1）college-lt （专家答疑左侧）2）college-md （专家答疑中问）3）college-rt （专家答疑右侧）如2： info.css （缩写）命名规则：info-left > info-left-list I A info-title如3： info-left-list 1 （资讯页面的左侧的第一个列表）2.6色彩、字体、字号等命名规则1. red、bull……用颜色名称直接定义2. cn、en 一般就区别中英文字体（一般也不怎么用到，按规定好的字体就可以了）3. fl4px、fl6px、fl8px ........... 字体为14px、16px、18px （一般默认字体12px 可在规定所有样式里面定义）4. fontbold：字体加粗5. fontitalic：斜体•2.7部分内容英文单词1. form表单（例：内容表单具体项content-form-address）2. contact联系人3. address 地址4. price 价格5. deta i I 明细6. i nformat i on 消息7. link链接8. dash横线9. remarks 备注10. browse 浏览11. source 来源12. check 查看三、代码规范3.1 HTML 代码1. 对页面添加class属性，样式都写在class属性上，id属性留个js 如：vdivclass=”content”>v/div>2. 如果有需要同时定义两个样式，中间用空格隔开如：<div class=,,content buir,x/div>。

CSS中的BEM命名规范是什么有什么好处

CSS中的BEM命名规范是什么有什么好处

CSS中的BEM命名规范是什么有什么好处在前端开发领域，特别是在 CSS 样式编写中，命名规范的选择至关重要。

BEM（Block Element Modifier）命名规范是一种备受推崇的命名方法，它为开发者提供了一种清晰、可维护和可扩展的方式来组织和管理 CSS 代码。

那么，BEM 到底是什么呢？BEM 是由三个主要部分组成的命名约定：块（Block）、元素（Element）和修饰符（Modifier）。

块（Block）是一个独立的、具有明确功能和目的的页面组件。

它可以是一个导航栏、一个表单、一个侧边栏等等。

在 BEM 中，块的名称通常使用一个单独的单词，比如“header”、“footer”、“sidebar”。

元素（Element）是块的组成部分。

它们是块内部的子元素，具有特定的功能和样式。

元素的名称以块的名称作为前缀，使用双下划线连接，比如“header__logo”、“sidebar__menuitem”。

修饰符（Modifier）用于改变块或元素的外观、行为或状态。

修饰符的名称以块或元素的名称作为前缀，使用双连字符连接，比如“headerfixed”、“sidebar__menuitemactive”。

接下来，让我们详细探讨一下 BEM 命名规范带来的好处。

首先，BEM 极大地提高了代码的可维护性。

在一个复杂的项目中，随着时间的推移，样式可能会不断地修改和扩展。

如果没有一个良好的命名规范，很容易导致样式的混乱和冲突。

而 BEM 明确的命名结构使得开发者能够快速准确地找到和理解特定组件的样式，从而更容易进行修改和维护。

其次，BEM 有助于增强团队协作的效率。

在一个团队开发的项目中，不同的开发者可能负责不同的部分。

如果大家都遵循 BEM 命名规范，那么无论是新加入的成员还是其他开发者，都能够迅速理解代码的结构和功能，减少了沟通成本和误解的可能性。

再者，BEM 有利于代码的复用。

由于 BEM 对组件的划分非常清晰，相同的块或元素可以在不同的页面或项目中重复使用，只需要根据具体的需求添加适当的修饰符即可。

css命名及书写规范

css命名及书写规范

css命名及书写规范CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如―搜索框‖则应命名为―searchInput‖、―搜索图标‖命名这―searchIcon‖、―搜索按钮‖命名为―searchBtn‖……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd―>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。

完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Strict//EN‖―/TR/xhtml1/DTD/xhtml1-strict.dtd―>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

css命名规范

css命名规范

css命名规范CSS（CascadingStyleSheets，层叠样式表）是一种用于定义网页外观的Web标准规范，广泛应用于万维网上的各种HTML文档。

在CSS的编写中应遵循良好的命名规范，这样可以保证CSS在不同的团队协作下编写、维护和管理起来更加顺畅，也有助于后期维护和修改。

CSS命名规范涉及到以下几个方面：一、标签命名标签命名（className idName）应采用简洁的、有意义的词汇，尽可能避免缩写，只使用小写字母和下划线，将空格替换为下划线。

标签名称也可以使用中划线，但无建议，仍建议使用下划线。

例如：class=wrapperid=page_main_body二、变量命名变量命名应采用有意义的、符合变量含义的单词，变量名称以字母或下划线开头，变量名可以是大写字母、小写字母，但尽量不要使用缩写，可以使用中划线。

例如：$page_main_body$page_sub_body三、CSS文件存放路径CSS文件一般存放在与功能相关的文件夹中，要求各文件夹名称明确清楚，其中新建CSS文件命名要尽量使用有意义的名称，可以采用中划线，也可以使用单词缩写。

例如：style/header.cssstyle/footer.cssstyle/common.css四、CSS属性和值命名CSS属性和值应采用小写字母，有些关键词会使用中划线。

常用的颜色可以使用英文（例如：red、blue、green），也可以使用十六进制的颜色代码（例如：#333333）。

例如：font-size: 12px;color: #333;border-width: 1px;五、CSS选择器命名CSS选择器应使用有意义的、符合元素类型含义的单词，有些属性可以直接使用英文单词，有些属性可以使用中划线表示，要尽量避免使用缩写。

例如：#id { }.class { }ul li { }六、CSS优先级CSS的优先级主要以特殊性和权重以及规则的数量来定义，值越高的优先级别越高，优先级越低的越容易被覆盖。