css开发文档？css3离线文档

其实css开发文档的问题并不复杂，但是又很多的朋友都不太了解css3离线文档，因此呢，今天小编就来为大家分享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属性书写顺序，建议遵循：布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举：布局定位属性主要包括：display&list-style&position(相应的top，right，bottom，left)&float&clear&visibility&overflow;

自身属性主要包括：width&height&margin&padding&border&background。

文本属性主要包括：color&font&text-decoration&text-align&vertical-align&white-space&

其他&content。

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

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

css 长度单位 详解

参考：

开发中主要用到的是 px、em、%。在css3中的vw、vh使用也慢慢多了起来。

相对于当前DOM元素的font-size。

如果设置当前元素的font-size为0.75em，而其父元素的font-size是16px时，则当前元素的font-size是0.75* 16px= 12px;

如果设置当前元素的width是10em，而当前元素的font-size是16px（无论是继承自父容器还是设置的）时，则当前元素的width是10* 16px= 160px;

注意1：任意浏览器的默认字体高都是16px，如果给body元素的font-size设置为62.5%，那body的font-size实际大小是 16px*62.5%=10px，如果所有子元素都以该字体大小使用em作为尺寸单位，相当于1em=10px，这样设置em就非常简单，只要将实际px数值除以10，就是em单位值。

注意2：em相对于px的值并不是固定的，是会随着父元素或者当前元素的font-size不同而变化

em是CSS3新增的一个相对单位（root em，根em），相对于根节点(一般为html节点)的font-size，如果html节点设置font-size= 100px，那么文档中的元素设置为0.3rem，则计算为：0.3* 100px= 30px。

这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明（通过下边样式覆盖上边样式原理），这些浏览器会忽略用rem设定的字体大小

相对于父元素的长度高度。

注意1：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。

注意2：position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。

CSS3新增样式，部分浏览器（IE8）不支持。

vh、vw：相对于视窗（Viewport）的高度和宽度，而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。

1vh等于1/100的视窗高度，1vw等于1/100的视窗宽度。

视窗:是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

CSS3新增样式，部分浏览器（IE8）不支持。

vmin：取视窗高度和宽度的最小值作为基准。

vmax：取视窗高度和宽度的最大值作为基准。

例如：浏览器视窗大小为 window.innerWidth=1000px，window.innerHeight=800px，那么，1vmin=800px/100=8px; 1vmax=1000px/100=10px。

使用场景：做移动页面开发时，如果使用 vw、wh设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin和 vmax是当前较小的 vw和 vh和当前较大的 vw和 vh。这里就可以用到 vmin和 vmax。使得文字大小在横竖屏下保持一致

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

rem中的r意思是root（根源），这也就不难理解了。

%是相对于父元素的大小设定的比率，vw、vh是视窗大小决定的。

vw、vh优势在于能够直接获取高度，而用%在没有设置 body高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

做移动页面开发时，如果使用 vw、wh设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin和 vmax是当前较小的 vw和 vh和当前较大的 vw和 vh。这里就可以用到 vmin和 vmax。使得文字大小在横竖屏下保持一致。

艾思软件:前端开发规范文档

开发规范（前端）

版本： v1.0

日期： 2022-01-15

一：命名规范

命名统一使用英文单词，要求简单，通俗易懂。

项目命名

使用小写字母，多单词采用“-”中划线拼接。

例如：my-world/ world

文件夹命名

使用小写字母，多单词采用“-”中划线拼接。

例如：home-page/ home

文件命名

使用小写字母，多单词采用“-”中划线拼接。

例如：home-page/ home

变量命名

使用小驼峰命名。如果单文件中变量过多，可能会出现重名的情况，建议增加前缀来区分不同功能的变量。或者把变量拆分到不同的文件之中。

例如：maxHeight/ userMaxHeight/ homeMaxHeight

常量命名

全部使用大写字母。多单词采用“ _”下划线隔开。

例如：const USER_TYPE=“9001”；

函数命名

规范一：使用小驼峰命名。被继承的父类的私有函数需要增加下划线前缀“ _getPrice()”。

例如：showToast/ _getPrice

规范二：根据函数作用，适当添加动词前缀。

例如：getSize/ setSize/ hasNumber

前缀请查看文档最底部“附件一：（函数命名动词前缀整合）”

二：注释规范

简单易懂的变量方法，尽量编写注释。复杂难懂的变量方法，必须编写注释

单行注释//

在代码上一行编写单行注释，简单介绍下方代码用途、注意事项等内容。

多行注释/**/或/***/

方法必须使用多行注释。当变量或代码块复杂，单行注释不足以解释清楚的时候，也需要使用多行注释。

例如：

//商品名称

goodsName:'猕猴桃',

/**

*传入人员姓名，从数据库中查询该人员的手机号码

*@param{String} userName姓名

*@return{Number}手机号

*/

getUserMobile(userName){

......

return mobile;

},

三：CSS规范

1. class类名使用小写字母，多单词采用“-”中划线拼接。

2. id采用小驼峰命名。

3. scss、less中变量、函数、mixin统一采用小驼峰命名。

4.缩进整洁有序。

四：项目规范

项目结构建议规范（实际根据具体需求逻辑进行调整）

src

api所有接口封装

asstes资源文件

- images图片

- videos

components所有组件

router路由

store状态管理

styles公共样式

utils公共函数库

view视图

- home视图文件需要分模块分文件夹存放

home.vue

home-detail.view

- user

五：附件

附件一：（函数命名动词前缀整合）

OK，关于css开发文档和css3离线文档的内容到此结束了，希望对大家有所帮助。