Web前端开发规范之css规范

html-css030

Web前端开发规范之css规范,第1张

今天小编要跟大家分享的文章是关于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前端工程师。

-webkit-box、-moz-box、-o-box、-ms-box、box这些都是指同一个属性即box,前面带有-号的是分别针对不同的浏览器的,其中

-webkit- 针对Chrome和Safari浏览器

-moz- 针对FireFox浏览器

-o- 针对Opera浏览器

-ms- 针对IE浏览器

也就是说凡是带有这样的前缀的都是这些浏览器的私有属性,只有各自的浏览器内部才有效。之所以这样,是因为有些css属性是带有实验性质的(尤其是css3),各主流浏览器尚未对它完全支持,这样就会使用私有属性来进行试验,而其他浏览器则会自动忽略该属性。因此,网页为了兼容各种不同的浏览器,就会把所有的私有属性都放上去,也包括不带前缀的标准属性。而浏览器的版本众多,很可能低版本的浏览器对某个属性处于试验性质,而高版本则已经完全支持了(也就是说可以不用前缀了),比如box属性就是如此,因此你把其他带有前缀的属性去掉不影响效果。但是,既然是网页,就不会是只有你一个人看的,要是其他用户用的是低版本的浏览器呢?所以,从兼容性角度出发,你最好不要删掉这些属性,除非你能保证其他用户用的浏览器与你的完全一样。