css样式书写规范】的更多相关文章

可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,并不希望大家完全采用,而是可以结合自己的团队需要,发展出一套适合自己的 CSS 代码规范. 也希望可以有更多的建议,共同的完善.本规范也可以在我的 Github 上看到,欢迎留言或者提 PR. 编码设置 采用 UTF-8 编码,在 CSS 代…
在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position  display  float  left  top  right  bottom   overflow  clear   z-index 2.自身属性:width  height  padding  border  margin   background 3.文字样式:font-family   font-size   font-style   font-weight   fo…
虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没有良好的命名,就会造成许多没必要的耽误和麻烦. 命名空间的规范: 布局:以 g 为命名空间,例如:.g-wrap ..g-header..g-content.状态:以 s 为命名空间,表示动态的.具有交互性质的状态,例如:.s-current.s-selected.工具:以 u 为命名空间,表示不耦…
关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺序 1.位置属性  (position, top, right, z-index, display, float等) 2.大小  (width, height, padding, margin) 3.…
经常遇到前端的朋友问及css样式书写的问题,结合自己实际的工作,自己总结了整理了一下,给大家分享: 一.顺序问题:显示属性-位置属性-元素自身属性-文本属性-其他属性 1.显示属性:z-index.display.list-style 2.位置属性:position.float 3.元素自身属性:width.height.margin.padding.border.border-radius.background 4.文本属性:color.font-size.font-weight.font-f…
格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0; padding:0;} a{ color: inherit; text-d…
单行形式书写风格的排版约束 1.   每一条规则的大括号 { 前后加空格 2.   多个selector共用一个样式集,则多个selector必须写成多行形式 3.   每一条规则结束的大括号 } 前加空格 4.   属性名冒号之前不加空格,冒号之后加空格 5.   每一个属性值后必须添加分号; 并且分号后空格 例如: div.test { width: 100px; height: 200px; } a:focus, a:hover { position: relative; right: 1…
一.框架为先,细节次之. 先写一些浮动,然后高与宽,然后再是细节方面的书写. 比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的 网站框架.然后再再去渲染容器里面的内容.最终呈现给用户. 通常像 color font padding 之类的,写在后面. .selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;} 二.有因才有果. 比如想使用”图片替换文字“技术,通常要使用的tex…
这里推荐先写显示属性,再写自身属性,再写文字属性:并不代表非得按这个顺序写,但这种写法可以使css结构更清晰易读,修改起来比较方便. 而且在团队项目中能更好地提高效率. //显示属性 display list-style position float clear //自身属性 width height margin padding border background //文本属性 color font text-decoration text-align vertical-align white…
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.使用CSS缩写属性:CSS有些属…
古语有云:不以规矩,不成方圆.不管是国还是家还是...都得有规矩加以约束.同样,在我们程序猿的代码中也有一定的规矩——W3C标准,但是我今天不会讲那么高深的道理,我只想说说,我近些日子在开发中所总结出来的CSS一些书写规范: 一.善用css缩写规则 1. 边距(4边): 1px 2px 3px 4px (上.右.下.左) 1px 2px 3px(省略  左等于右) 1px 2px (省略  上等于下) 1px(四边都相同) 2. 缩写(border)特定样式: border:1px solid…
一般团队都有对CSS样式的规范,因为只有写的规范些,维护层本低,易懂.我们开发并不一次性的,往往都是要迭代的,如果这次随便写,下次迭代的时候将付出高昂的代价.而团队的规范一般都大同小异,往往都包含一下内容: 1.class命名及使用 (1).命名尽量简洁有意义,比如大盒子一般命名为‘container’,而这种就命名为‘steps’,然后类名个人喜欢用‘-’,而不是驼峰或者下划线比如:app-main (2).使用:类名一般都是用来写样式的,js操作dom多用ID选择器 2.少用id选择器, 因…
关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺序 1.位置属性  (position, top, right, z-index, display, float等) 2.大小  (width, height, padding, margin) 3.…
1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指令 在angular中指令是作用在特定的DOM元素上的,目的是用来扩展元素的功能,为元素添加新的功能:angular框架本身提供的指令就叫做内置指令,例如:NgClass.NgStyle.NgIf.NgFor.NgSwitch等,利用NgClass.NgStyle和Class指令来动态绑定CSS样式…
样式的组成 1.选择器:将样式与页面中的某一个或某些标签建立联系,就要使用选择器,在head标签下写一个style标签,将需控制参数的标签名写在这个style标签下,设置属性即可通过css来控制html的样式,这就是选择器 2.作用域:作用域就是style标签下需要控制的标签名后面的{},这个{}内的参数就是作用域参数 3.样式块:作用域里面的参数语句就是样式语句,这个作用域就是样式块 css的引入方式 1.行间式样式导入,直接将css样式写在标签的style属性中 优点:对样式操作简单粗暴 缺…
我们在埋头写代码的时候,还要学会收集整理一些常用的代码小技巧,以便在工作时候,可以及时调取,提高工作效率. 今天,我把之前收集整理的一些CSS代码小技巧分享出来,供你参考学习,希望对你有帮助. 一.CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text…
1.CSS书写顺序: (1)位置:position.top.right.z-index.display.float (2)大小:width.height.padding.margin (3)文字系列:font.line-height.letter-space.color.text-align (4)背景:background.border (5)其他:animate.transition 2.一些特殊字体样式: 首行缩进2字符:{text-indent:2em;} 水平居中:{text-alig…
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式:使用UTF-8 语义性 对于HTML5而言,例如header.footer.nav.section等跟div能实现的功能基本类似,但是语义性上有着天壤之别. TODO待定项 尚未实现的或待定的内容一定要标识强调出来,利用TODO辨识,而非其他诸如@@来强调. 在todo项中如果有必要列明联系人,比…
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-heig…
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-heig…
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书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如pad…
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, lin…
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height…
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考   这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. 一.CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-he…
转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width,…
前端体系的变化可谓是日新月异,短短一年时间,从理论.框架.构建工具.甚至开发语言都发生非常大的变化. 随着新项目就即将启动,我抽时间回顾了一下以往项目的前端架构,零零散散产生了许多想法,尽量一一记录下来,为新的框架搭建做点准备. 首先来聊聊CSS的的各种规范与理论.回顾过去的代码,首先让我头痛不已的就是那些不知所谓的类名,以及数不清的难以维护的CSS/LESS代码. 我曾经对自己和前端小组的成员提出过要求,强制使用BEM方法来书写CSS,但是在使用的过程中,也出现了总总问题. 它带来的好处是显而…
css书写规范: 1. 编码统一为utf-8;2. 协作开发及分工: i根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件,同时根据页面相似程序,事先写好大体框架文件.共用css文件base.css由i书写, 协作开发过程中, 每个页面务必都要引入, 文件包含reset及头部底部样式, 此文件不可随意修改;3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由分…
记得刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方式.那么是怎么个顺序呢? (1)定位属性:position  display  float  left  top  right  bottom   overflow  clear   z-index (2)自身属性:width  height  padding  border  margin …
什么是css: css全名是层叠样式表(Cascading Style Sheets) CSS的作用:给html标签添加"样式",样式定义了如何显示 HTML 元素 标签是可以由自己的属性去定义样式的(比如表格可以自定义边框),为什么要新定义一个CSS来添加样式呢?因为早期的设计混乱,标签的样式属性没有"通用"性(不同的标签有不同的样式属性),相对难以去使用. CSS的用法: CSS可以根据位置分成行内式.内联式.外联式. 内嵌式:在标签的style属性内使用&qu…
刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方式.那么是怎么个顺序呢? (1)定位属性:position  display  float  left  top  right  bottom   overflow  clear   z-index (2)自身属性:width  height  padding  border  margin (3)…