专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »博文摘选 » 我最近使用的一种CSS的重构思路 »正文

我最近使用的一种CSS的重构思路

来源: 发布时间:星期六, 2010年1月9日 浏览:0次 评论:0
最近终于有心情把我CSS重构由于这种写法部分是我自己琢磨出来带有偏好做法
仅供参考如果采用后被同事取笑老板罚款本人概不负责

我重构时候学习了些行业标准做法主要思路来源于以下比如Rest,Grid,Dry等等(不明含义者请自行Google)
1Css文件组织
Css文件采用按照Rest中资源来进行组织 比如User,那就有个user.css,如果这个资源比较复杂 可以进步分解成user_,user_edit等等某些共用组件可以再分出来比如toolbar.css
2根选择器使用,其他尽量使用原生选择器,根选择器般是网页Grid系统中大块结构
例子: table.user td span{font-size:12px}

即使使用,也带上原生标签 

 例子: table.user td span.user{font-size:12px}
这样做最主要原因是给取名实在在是头痛名字还容易冲突取名时候要考虑语义其实我们只不过为了美化下显示采用了我这种做法Css文件不看Html源码 我也能知道我正在干什么了
3文本标签使用
很多网站WebSite使用span,我避免使用,那么同层级span只能使用那尽量使用<i></i><em></em><strong></strong><cite></cite>如果是区别层级那么多种标签组合也够用了
例如 <div ="score"><em>张 3</em>购买了<strong>3个</strong>面包</div>
相对css就是 div.score em{color:red}
             div.scroe strong{color:greeen}

块元素要灵活运用<h1>到<h6>他们和Div是等价


4使用情况
a,当某个块是Grid中基本块时候 b,供javascript时候c,万不得已情况下也就是说利用原生选择器就能解决问题就不要用
5美工只负责大括号里面内容
比如 div.score em{color:red; font:12px}中美工只负责调整{}中内容员负责{}前内容由于不轻易引入,大家比较容易沟通
6工作流程
1美工利用Grid系统做出设计图
2设计图中基本块命名用来做根选器
3员将做好html和css交给美工 css中大括号内容员可以不写或者少写
4美工只调整css中{}内容直到满意为止 如果发觉{}前内容不合理员商量(注意由于不要求美工看源代码只要求看Css, 而css中主要是原生标签所以基本能看懂这样不管是asp.net,jsp,php都不需要美工关心了)

基本就这么多了 其他时也想不起来欢迎指出问题和缺点
0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: