全网推广网站,茂名网站开发公司推荐,视频wordpress源码,烟台做网站公司我开始学前端的时候也是对于规范问题头疼#xff0c;后来看了网易的NEC规范#xff0c;惊呼牛逼 NEC : 更好的CSS样式解决方案 只遵循横向顺序即可#xff0c;先显示定位布局类属性#xff0c;后盒模型等自身属性#xff0c;最后是文本类及修饰类属性。 →显示属性自身属性…我开始学前端的时候也是对于规范问题头疼后来看了网易的NEC规范惊呼牛逼 NEC : 更好的CSS样式解决方案 只遵循横向顺序即可先显示定位布局类属性后盒模型等自身属性最后是文本类及修饰类属性。 →显示属性自身属性文本属性和其他修饰 displaywidthfont visibilityheighttext-align positionmargintext-decoration floatpaddingvertical-align clearborderwhite-space list-styleoverflowcolor topmin-widthbackground 1 .m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;} 如果属性间存在关联性则不要隔开写。 1 2 /* 这里的height和line-height有关联性 */ .m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;} 私有在前标准在后 先写带有浏览器私有标志的后写W3C标准的。 1 .m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000; 作者词晖 链接https://www.zhihu.com/question/19586885/answer/48933504 来源知乎 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等) amp;amp;lt;img srchttps://pic4.zhimg.com/50/5a67fa4dab92c018abfd97e4ab286ac9_hd.jpg data-rawwidth500 data-rawheight250 classorigin_image zh-lightbox-thumb width500 data-originalhttps://pic4.zhimg.com/5a67fa4dab92c018abfd97e4ab286ac9_r.jpgamp;amp;gt;CSS书写规范使用CSS缩写属性 CSS有些属性是可以缩写的比如padding,margin,font等等这样精简代码同时又能提高用户的阅读体验。 amp;amp;lt;img srchttps://pic3.zhimg.com/50/2166c1fb168908a5858998eab2d309aa_hd.jpg data-rawwidth500 data-rawheight250 classorigin_image zh-lightbox-thumb width500 data-originalhttps://pic3.zhimg.com/2166c1fb168908a5858998eab2d309aa_r.jpgamp;amp;gt; 去掉小数点前的“0” amp;amp;lt;img srchttps://pic2.zhimg.com/50/ea65b1c1c00c792866a670e9d66161a8_hd.jpg data-rawwidth500 data-rawheight250 classorigin_image zh-lightbox-thumb width500 data-originalhttps://pic2.zhimg.com/ea65b1c1c00c792866a670e9d66161a8_r.jpgamp;amp;gt; 简写命名 很多用户都喜欢简写类名但前提是要让人看懂你的命名才能简写哦! amp;amp;lt;img srchttps://pic3.zhimg.com/50/53ddaefb44a6a8ce5b54de9f15466fca_hd.jpg data-rawwidth500 data-rawheight250 classorigin_image zh-lightbox-thumb width500 data-originalhttps://pic3.zhimg.com/53ddaefb44a6a8ce5b54de9f15466fca_r.jpgamp;amp;gt; 16进制颜色代码缩写 有些颜色代码是可以缩写的我们就尽量缩写吧提高用户体验为主。 amp;amp;lt;img srchttps://pic4.zhimg.com/50/46bf23e08a7195ec7091217bb5c667d6_hd.jpg data-rawwidth500 data-rawheight250 classorigin_image zh-lightbox-thumb width500 data-originalhttps://pic4.zhimg.com/46bf23e08a7195ec7091217bb5c667d6_r.jpgamp;amp;gt; 连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器为什么呢? 输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”) amp;amp;lt;img srchttps://pic2.zhimg.com/50/45dddce1b5295a7c09f2380900dce8d1_hd.jpg data-rawwidth500 data-rawheight250 classorigin_image zh-lightbox-thumb width500 data-originalhttps://pic2.zhimg.com/45dddce1b5295a7c09f2380900dce8d1_r.jpgamp;amp;gt; 不要随意使用Id id在JS是唯一的不能多次使用而使用class类选择器却可以重复使用另外id的优先级优先与class所以id应该按需使用而不能滥用。 amp;amp;lt;img srchttps://pic2.zhimg.com/50/951bee68367f559a1fd37db3d242e59f_hd.jpg data-rawwidth500 data-rawheight250 classorigin_image zh-lightbox-thumb width500 data-originalhttps://pic2.zhimg.com/951bee68367f559a1fd37db3d242e59f_r.jpgamp;amp;gt; 为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀让语义更明了比如下图是添加了“.is-”前缀。 amp;amp;lt;img srchttps://pic4.zhimg.com/50/d81807b01ec5d710debe3f0b4191ae2f_hd.jpg data-rawwidth500 data-rawheight250 classorigin_image zh-lightbox-thumb width500 data-originalhttps://pic4.zhimg.com/d81807b01ec5d710debe3f0b4191ae2f_r.jpgamp;amp;gt; CSS命名规范(规则)常用的CSS命名规则 头header 内容content/container 尾footer 导航nav 侧栏sidebar 栏目column 页面外围控制整体佈局宽度wrapper 左右中left right center 登录条loginbar 标志logo 广告banner 页面主体main 热点hot 新闻news 下载download 子导航subnav 菜单menu 子菜单submenu 搜索search 友情链接friendlink 页脚footer 版权copyright 滚动scroll 内容content 标签tags 文章列表list 提示信息msg 小技巧tips 栏目标题title 加入joinus 指南guide 服务service 注册regsiter 状态status 投票vote 合作伙伴partner 注释的写法: /* Header */ 内容区 /* End Header */ Id的命名: 1)页面结构 容器: container 页头header 内容content/container 页面主体main 页尾footer 导航nav 侧栏sidebar 栏目column 页面外围控制整体佈局宽度wrapper 左右中left right center (2)导航 导航nav 主导航mainnav 子导航subnav 顶导航topnav 边导航sidebar 左导航leftsidebar 右导航rightsidebar 菜单menu 子菜单submenu 标题: title 摘要: summary (3)功能 标志logo 广告banner 登陆login 登录条loginbar 注册register 搜索search 功能区shop 标题title 加入joinus 状态status 按钮btn 滚动scroll 标籤页tab 文章列表list 提示信息msg 当前的: current 小技巧tips 图标: icon 注释note 指南guild 服务service 热点hot 新闻news 下载download 投票vote 合作伙伴partner 友情链接link 版权copyright 注意事项:: 1.一律小写; 2.尽量用英文; 3.不加中槓和下划线; 4.尽量不缩写除非一看就明白的单词。 CSS样式表文件命名 主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css 转载于:https://www.cnblogs.com/rik28/p/8417911.html
