vue项目实战系列十九:CSS书写顺序
全局:global.css全局样式为全站公用,为页面样式基础,页面中必须包含。私有:style.css独立页面所使用的样式文件,页面中必须包含。其他:cursor/z-index/zoom/overflowCSS3属性:transform/transition/animation/box-shadow/border-radius如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照-webkit
①. 位置属性:
position、top、right、z-index、display、float等
②. 大小:
width、height、margin、padding、margin
③. 文字系列:
font、line-height、letter-spacing、color-text-align等
④. 背景:
background、border等
⑤. 其他:
animation、transition等
css规范CSS书写顺序显示属性:display/list-style/position/float/clear…自身属性(盒模型):width/height/margin/padding/border行高:line-height文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…其他:cursor/z-index/zoom/overflowCSS3属性:transform/transition/animation/box-shadow/border-radius如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加,标准属性写在最后
全局:global.css全局样式为全站公用,为页面样式基础,页面中必须包含。结构:layout.css页面结构类型复杂,并且公用类型较多时使用。多用在首页级页面和产品类页面中。私有:style.css独立页面所使用的样式文件,页面中必须包含。模块 module.css产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用。主题 themes.css实现换肤功能时应用。补丁 mend.css基于以上样式进行的私有化修补。CSS命名规范头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 注册:regsiter 状态:status 投票:vote 合作伙伴:partnerXHTML文件中id的命名(1)页面结构容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center (2)导航导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary (3)功能标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标签页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyright
我觉得可以分三种:
1.全站架构的,可以参考YUI,做到简介易懂易派生
2.组件级的。可以参考Ext的,做到复用无冲突。
3.应用级的。团队约定
更多推荐




所有评论(0)