说一下css规范？

2023-02-19 19:21:02html-css031

说一下css规范？,第1张

一、Css书写顺序：

1.位置属性(position, top, right, z-index, display, float等)　

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)　

4.背景(background, border等)

5.其他(animation, transition等)

二、Css语法：

命名一般为小写英文字母。

为了代码的易读性，在每个声明块的左花括号前添加一个空格。

每条声明语句的 : 后应该插入一个空格。

所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

十六进制值应该全部小写，例如，#fff。

尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

避免为 0 值指定单位，例如，用 margin: 0 代替 margin: 0px。

Css常用的一些命名：

可参考：CSS 常用命名 - 彼岸时光 - 博客园。

三、Css的引入：

Css的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

四、Css的命名规范(BEM,OOCSS)：

什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。

命名约定如下：

.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。

.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。

优点：

BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。

缺点：

这样类名过于长，且复杂。

什么是OOCSS（面向对象CSS）：

OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。

OOCSS的优点：

减少CSS代码。

具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。

语义标记，有助于SEO。

更好的页面优化，更快的加载时间（因为有很多组件重用）。

可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。

能轻松构造新的页面布局，或制作新的页面风格。

OOCSS的缺点：

OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。

欢迎到优就业来了解

一．文件命名规范

[b]样式文件命名[/b]

[quote]主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css [/quote]

[b]CSS ID 的命名[/b]

[quote]页头：header

登录条：loginbar

标志：logo

侧栏：sidebar

广告：banner

导航：nav

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

滚动：scroll

页面主体：main

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

下载：download

状态：status

按钮：btn

投票：vote

合作伙伴：partner

友情链接：friendlink

页脚：footer

版权：copyright

外　套：wrap

主导航：mainnav

子导航：subnav

页　脚：footer

整个页面：　content

页　眉：header

页　脚：footer

商　标：label

标　题：title

主导航：mainbav（globalnav）

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

旗　志：logo

标　语：banner

菜单内容1： menu1content

菜单容量：　menucontainer

子菜单：submenu

边导航图标：sidebarIcon

注释：　note

面包屑：breadcrumb(即页面所处位置导航提示）

容器：　container

内容：　content

搜索：　search

登陆：　Login

功能区：shop(如购物车，收银台)

当前的　current[/quote]

[b]网站常用中英文对照表[/b]

[quote]网站导航 Site Map

公司简介 Profile or Company Profile or Company

公司设备 Equipment Equipment

公司荣誉 Glories Glories

企业文化 Culture Culture

产品展示 Product Product

资质认证 Quality Certification

企业规模 Scale Scale

营销网络 Sales Network

组织机构 organization organization

合作加盟 Join In Cooperation

技术力量 Technology Technology

经理致辞 Manager`s oration

发展历程 Development History

工程案例 Engineering Projects

业务范围 Business Scope

分支机构 Branches

供求信息 Supply &Demand

经营理念 Operation Principle

产品销售 Sales Sales

联系我们 Contact Us Contact Us

信息发布 Information Information

返回首页 Homepage Homepage

产品定购 order order

分类浏览 Browse By Category

电子商务 E-business

公司实力 Strength Strength

友情连结 Hot Link

应用领域 Application Fields

人力资源 Human Resource Hr

领导致辞 Leader`s oration

企业资质 Enterprise Qualification

行业新闻 Trade News

行业动态 Trends

客户留言 Customer Message

客户服务 Customer Service

新闻动态 News &Trends

公司名称 Company Name

销售热线 Sales Hot-Line

联系人 Contact Person

您的要求 Your Requirements

建设中 In Construction

证书 Certificate Certificate

地址 ADD Add

邮编 Postal Code Zipcode

电话 TEL Tel

传真 FAX Fax

产品名称 Product Name

产品说明 Description Description

价格 Price

品牌 Brand

规格 Specification

尺寸 Size

生产厂家 Manufacuturer Manufacturer

型号 Model

产品标号 Item No.

技术指标 Technique Data

产品描述 Description

产地 Production Place

销售信息 Sales Information

用途 Application

论坛 Forum

在线订购 On-line order

招商 Enterprise-establishing

招标 Bid Inviting

综述 General

业绩 Achievements

招聘 Join Us

求贤纳士 Join Us

大事 Great Event

动态 Trends

服务 Service

投资 Investment

行业 Industry

规划 Programming

环境 Environment

发送 Delivery

提交 Submit

重写 Reset

中国企业网技术支持 Powered By Ce.Net.Cn

社区 Community

业务介绍 Business Introduction

在线调查 Online Inquiry Inquiry

下载中心 Download

会员登陆 Member Entrance

意见反馈 Feedback

常见问题 FAQ

中心概况 General Profile

教育培训 Education &Training

游乐园 Amusement Park

在线交流 Online Communication

专题报道 Special Report[/quote]

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为 “searchBtn”……

一. 常规书写规范及方法

1. 选择DOCTYPE：

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2. 指定语言及字符集：

为文档指定语言：

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：

常用的语言定义：

标准的XML文档语言定义：

<?xml version=”1.0″ encoding=” utf-8″?>

针对老版本的浏览器的语言定义：

为提高字符集，建议采用“utf-8”。

3. 调用样式表：

外部样式表调用：

页面内嵌法：就是将样式表直接写在页面代码的head区。如：

外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；

5、派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：

.mainMenu ul li {background:url(images/bg.gif)}

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

<ul>

</ul>

</div>

#mainMenu {

width:100%

height:30px

background:url(images/mainMenu_bg.jpg) repeat-x

}

#mainMenu ul li {

float:left

line-height:30px

margin-right:1px

cursor:pointer

}

*******************************************************************************************

命名参考(来源网络)

常用的CSS命名规则：

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list

常用代码结构：

div：主要用于布局，分割页面的结构

ul/ol：用于无序/有序列表

span：没有特殊的意义，可以用作排版的辅助，

例如

<li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

h1-h6：标题

h1-h6 根据重要性依次递减

h1位最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，

例如：

fieldset &legend：fildset套在表单外，legend用于描述表单内容。

例如：<form>

<legend>title</legend>

</fieldset>

</form>

dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，

例如<dl>

<dt>什么是CSS?</dt>

<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>

<dt>什么是XHTML？</dt>

<dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似HTML的角色的XML。本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>

</dl>

C #content

S #subcol

M #maincol

X #xcol

这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名：

根据w3c网站上给出的,最好是用意义命名

比如：是重要的新闻高亮显示（像红色）

有两种

.red{color:red}

.important-news{color:red}

很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

CSS命名规范

DIV CSS名称说明

网站公用相关

Container div #container 容器

Header or banner div #header 页头部分

Main or global navigation div #mainNav 主导航

Menu #menu 菜单

Sub Menu #submenu 子菜单

Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏

Main div #main 页面主体

Content div #content 内容部分

The main content area #contentMain 主要内容区域

Footer div #footer 页脚部分

Tag #tag 标签

Message #msg #message 提示信息

Tips #tips 小技巧

Vote #vote 投票

Friend Link #friendlink 友情连接

Title #title 标题

Summary #summary 摘要

Sub-navigation list #subNav 二级导航

Search input #searchInput 搜索输入框

Search output #searchOutput 搜索输出和搜索结果相似

Search #search 搜索

Search results #searchResults 搜索结果

brand #branding 商标

branding-logo #brandingLogo LOGO

Site information #siteinfo 网站信息

Designer or other credits #siteinfoCredits 信誉

Join us #joinus 加入我们

Partnership opportunities #partner 合作伙伴

Services #service 服务

Regsiter #regsiter 注册

Status #status 状态

9、鼠标手势：

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer”

参考文献： http://www.ibm.com/developerworks/cn/web/1512_chengfu_bem/

http://www.oschina.net/translate/thoughtful-css-architecture

BEM的本质是一个css类名命名方案。由于CSS没有作用域的概念，也不像SCSS那样可以写出层级关系，所以，如果有两个类名，比如.nav和li，虽然你知道li在.nav中，你也可以写出 .nav li {} 这样的选择器，但是很多情况下我们还是希望给li专门设一个类名，这时候BEM就是一个好的方案。

所谓BEM，其实是三个单词的缩写：Block（模块）、Element（元素）、Modifier（修饰符）。

一个模块是一个独立的实体部分，就像应用的一块“积木”。一个模块既可以是简单的也可以是复合的（包含其他模块）。

命名规范：

模块名称可以由拉丁字母，数字和短划线组成。如：.block、.form

比如搜索框和按钮组成的组件就是一个模块。

我认为的命名的最佳实践是：.xxoo，也就是用两个词组成的词组来描述这个块，比如.propertyeditor或.languageswitcher，前者意思是属性编辑器，后者是语言切换器。强行用一个词来描述的话，你会发现词根本不够用。

B和M可以直接连用，跳过E，这是允许的。

一个元素是块的一部分，具有某种功能。元素是依赖上下文的：它们只有处于他们应该属于的块的上下文中时才是有意义的。

比如，.form的input元素和button元素都是元素。

命名规范：

元素名称可以包含拉丁字母，数字，破折号和下划线。 CSS类名写成块名称加破折号加上元素名称：.block-elem，其中elem可以是直接元素标签名，也是表义的名称。

我认为的最佳实践是：比如对话框内有一个确定按钮，这个确定按钮的类名可以是：.alert-modal__button--done，其中done是修饰符，表示是“表确定的那个按钮”。修饰符在下面讲。