前端CSS规范

说起来工作也快三个年头了 ,却还没有写博客或者记载下来的习惯,也是件惭愧的事。最近看了一些大牛们的博客 加之一直想要自己写点东西,然后就开始了。我是从小喜欢写东西的,只是后来慢慢扔掉了。说起来也是很愧对自己。好了,不多说了 ,写点我擅长的吧,毕业之后就开始从事前端开发工作,刚开始也只是看到一些简单的代码就能编出好看的页面 也就是觉得很神奇,喜欢这种感觉 ,时间真是过的很快  快三年了 !! 下面说重点

在任何一个系统或者项目开发之前都应该也需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。由于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是趋势所向。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值