css样式规范,简述css样式规则

Web前端开发规范之css规范

今天小编要跟大家分享的文章是关于Web前端开发规范之css规范。Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。来和小编一起看一看css规范的原则吧！

css规范

1、编码规范为utf-8。

2、协作开发及分工：i会根据各个模块，同时根据页面相似程序，事先写**体框架文件，分配给前端人员实现内部结构表现行为。共用css文件base.css由i书写，协作开发过程中，每个页面请务必都要引入，此文件包含reset及头部底部样式，此文件不可随意修改。

3、class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的，为JS预留钩子的除外。

4、为JS预留钩子的命名，请以js_起始，比如：js_hide，js_show。

5、class与id命名：大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文数字来组合命名，如i_comment，fontred，width200。避免使用中文拼音，尽量使用简易的单词组合。总之，命名要语义化，简明化

6、规避class与id命名(此条重要，若有不明白请及时与i沟通)：a)通过从属写法规避，示例见d。b)取父级元素id/class命名部分命名，示例见d。c)重复使用率高的命名，请以自己代号加下划线起始，比如i_clear。d)a，b两条，适用于在2中已建好框架的页面，如，要在2中已建好框架的页面代码中加入新的div元素，按a命名法则：...，样式写法：#mainnav.firstnav{.......}按b命名法则：...，样式写法：.main_firstnav{.......}

7、css属性书写顺序，建议遵循：布局定位属性--自身属性--文本属性--其他属性.此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举：布局定位属性主要包括：displaylist-styleposition(相应的top，right，bottom，left)floatclearvisibilityoverflow;

自身属性主要包括：widthheightmarginpaddingborderbackground。

文本属性主要包括：colorfonttext-decorationtext-alignvertical-alignwhite-space

其他content。

8、书写代码前，提高样式重复使用率。

以上就是小编今天为大家分享的关于Web前端开发规范之css规范的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

css编写规范

全局公用样式使用 G- 前缀(Global)，并遵循 【前缀-大类-小类】 或 【前缀-描述】 的写法：

补丁样式使用 P- 前缀(patch)，遵循【前缀-模块】的写法：

使用BEM

BEM是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用 __ 与 -- 连接（这里用两个而不是一个是为了留下用于块儿的命名）。命名约定的模式如下：

相关属性应为一组，推荐的样式编写顺序 ：位置/显示 - 容器/大小 - 排版/文本 - 装饰

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。

当出现多个嵌套的时候容易失去控制，应保持不超过一个嵌套

与 link 相比， @import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。

替代办法：

a:link - a:visited - a:hover - a:active

使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写。

不使用第三方兼容，对齐，方便阅读

css样式的基本规则是什么？

1、选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

2、属性和属性值以“键值对“ 的形式出现。

3、属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

4、属性和属性值之间用英文“:“连接。

5、多个“键值对”之间用英文“;”进行区分。可以用段落和表格的对齐的演示。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

扩展资料：

CSS作为一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。

css的基本语法结构及规范

一、CSS简介

CSS(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言，之前提到的W3C规范中的“样式”。

作用：

1、美化界面。

2、页面布局。

基本语法：

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

。。。

选择器:是用来选择标签的，选出来以后给标签加样式。

从Hello World说起，

p style="background-color:#FFF;color:#000;font-size:30px;"Hello World!/p

这样写可以实现将原本的白底黑字Hello World! 改成样式为 黑底白字的效果。但是这样写有一定的缺点：

缺点1：内容、样式、行为三者未分离，代码糅杂，不符合W3C规范，难以维护。

缺点2：代码冗余，不可复用。

二、如何引入CSS？

1）行内样式

即上述的一般形式，由于其存在的缺点，介绍下一种样式。

2）内嵌样式，给p标签加样式，加在head标签中

style type="text/css"

p{

background-color:#FFF;

color:#000;

font-size:30px;

}

/style

当本页面的p标签都需要相同的样式时，这样写大大降低了代码量，并让其他编程人员一眼分辨出来CSS样式。

3）链接样式（链入式）

在head标签中加入

link href="../css/my.css" type="text/css" rel="stylesheet"/

将CSS文件和html文件分开来放，这样增加了代码的重用性，但是每个浏览器都要单独读取css文件中的样式，比较慢，如果追求速度，内嵌样式会更好。

4）导入样式

style type="text/css"

@import url("路径名");

/style

四种样式的优先级：

如果一个页面中四种样式同时存在，这四种都会对标签起作用，但是重复样式的属性值，只有最后一个有效。如果内嵌样式和导入样式放在一起，则内嵌样式起作用。

如果内嵌样式和导入样式分成两个style定义，则在CSS样式中的最后一个style起作用。

附：css中注释的格式，没有单行注释，所有的注释均是/*注释内容*/