前端CSS规范

来源:互联网 发布:淘宝旺旺官方买家 编辑:程序博客网 时间:2024/05/01 04:13
说起来工作也快三个年头了 ,却还没有写博客或者记载下来的习惯,也是件惭愧的事。最近看了一些大牛们的博客 加之一直想要自己写点东西,然后就开始了。我是从小喜欢写东西的,只是后来慢慢扔掉了。说起来也是很愧对自己。好了,不多说了 ,写点我擅长的吧,毕业之后就开始从事前端开发工作,刚开始也只是看到一些简单的代码就能编出好看的页面 也就是觉得很神奇,喜欢这种感觉 ,时间真是过的很快  快三年了 !! 下面说重点在任何一个系统或者项目开发之前都应该也需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。做久了也会知道应该这样。CSS书写顺序*{ /*显示属性*/ display position float clear cursor            /*盒模型*/ margin padding width height            /*排版*/  vertical-align white-space  text-decoration text-align            /*文字*/ color font content             /*边框背景 为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便,哈哈。*/ border  background }             下表顺序为从上到下,从左到右: ========================  display || visibility  list-style : list-style-type || list-style-position || list-style-image position  top || right || bottom || left z-index CSS命名规则:     一.文件命名规范          全局样式:global.css;         框架布局:layout.css;         字体样式:font.css;          链接样式:link.css;          打印样式:print.css;         主要的 master.css;        专栏 columns.css;          主题 themes.css;         主要的 master.css;        模块 module.css;         基本共用 base.css;         表单 forms.css;         补丁 mend.css;      二.页面结构         容 器: container         页 头:header        内 容:content         页面主体:main         页 尾:footer         栏目:column          页面外围控制整体布局:wrapper         左右中:left right center     三.导航         导航:nav          主导航:mainbav         子导航:subnav         顶导航:topnav         边导航:sidebar         左导航:leftsidebar         菜单:menu          子菜单:submenu    四.功能         标志:logo         广告:banner         登陆:login          登录条:loginbar         注册:regsiter         搜索:search         标题:title         加入:joinus         状态:status         按钮:btn         滚动:scroll         标签页:tab         文章列表:list         提示信息:msg         当前的: current         小技巧:tips         图标: icon         注释:note         指南:guild         服务:service         热点:hot         新闻:news          下载:download         投票:vote  

以上都是常用的命名,通俗易懂

小结:CSS选择符的命名:所有选择符必须有小写英文字母或“_”下划线组成,样式名必须是表示该样式的大概含义(禁止出现如Div1、div2、Style1……),参考后面的“样式命名参考”。对CSS选择器的使用只允许派生选择器、类选择器和属性选择器,以及它们的组合使用,严禁使用ID选择器(ID是用于JavaScript的编写)。网站的CSS必须有个统一的架构,复用CSS,尽量减少重复CSS的定义。基础CSS就是那些常用的CSS定义。基本上所有浏览器都有客户端调试工具,如果想改页面或者调试的时候就使用此类工具,调试好之后再改源文件,缩短时间。关于CSS3,现在CSS3可以实现更多更好的视觉效果,能用就用,不用管那么多兼容问题,毕竟CSS3是趋势所向。

好了,就说这么多吧 ,网上有很多开放的东西都可以借鉴,也希望这篇文章能帮助到有需要的人。第一次写还有很多不足之处,请多多见谅!

0 0
原创粉丝点击