睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

CSS模块化及多人分工协作

作者:睿美印象网站建设工作室  发布日期:2012-10-01
   自己对css框架,css模块这些感念一直比较模糊,完全跟风状态。最近在工作中遇到的问题,让自己不得不重视起这个问题。习惯了一个人搞定一切,策划-设计-出页面,当一个项目需要短时间多人协作完成时,样式文件的规划,css模块、框架的思想就先的尤其重要。

  下面这个问题最近比较困扰:如果几个人同时 做一个网站前台,怎么样分配能让整站 风格统一,样式文件结构合理没有重复冗余,效率最高?请教了几个同学,得到的答案总结如下:风格统一方面,一起商量先出草图,根据草图由一个人做出标准风格页面,然后一起开干,剩下的就是不停的修改。制作方面,整站定下几个不同的css文件,每人负责不同的样式文件。

  说起来容易的事情,一旦实施起来就不是那么容易了。设计的事,还是不敢冒险,幸好页面不是很多,一级、二级页面加起来不到20个,一个人可以搞定。说下制作过程。

  (一)规范css命名、书写顺序和注释。

  这点重要性就不说了,很难想象,一个样式表中同时出现几种“个性化很强”的命名方式会让人多纠结。命名可以使用中间“-”,"_"符号连接,如text-box,text-content,text_box,或者大小写“驼峰”式书写,textBox,textContent等。注释很重要,注释可以分为三级,大类注释用于css块的划分,如header ,container , footer,二类注释,大类下面的局部模块注释,三类注释一个选择符内注释,用于一些特殊效果的注释或者hack注释。书写格式,可以采用横排缩进的方式,显示出层级关系。

  (二)根据效果图,定下样式表结构划分

   网上很多介绍css文件结构划分的,大致就那几个文件:layout.css/main.css/footer.css/header.css/reset.css等等,大家都说自己的好,落实都实践,才明白,没有最好的,只有最适合的。最好的样式划分,应该是紧紧依赖于HTML结构本身,不是放任四海皆的。
css文件的分布除了要便于以后的分工协作,还有灰常重要的一点:如果字节小的话,可以尽量压缩降低并发连接数,如果字节过大,可以分割,防止下载速度太慢,影响样式加载。这些就是具体问题具体对待了。比如搜索引擎和门户首页这种访问量极大的页面最好将css写入页面内部。

  初步定下一下css样式结构:
  
程序代码 Example Source Code

     reset.css /*页面样式充值*/
     header.css /*全站头部样式*/
     footer.css /*全站尾部样式*/
     public.css /*全站公共模块样式*/
     index.css /*首页特有样式*/
     container.css /*二级及以下主体样式*/
     print.css /*打印样式*/
     ie.css /*IE hack*/
  


    (三)分工协作  

   戏台已经搭玩了,接着就要开始唱戏。找出所有公共的文字列表,图文混排列表。一个人负责写在公共模块里,头部、尾部各一个人,二级页面框架一个人,个性化的部分留到最后写。

   实际操作起来还是会有很多问题,代码的冗余无法避免,只能最小化。为了高效有时也不得不做出牺牲。上面只是自己在工作中的一点心得。也是第一次真正的发掘css模块化思想的优越性:便于修改,便于管理,便于多人协作。期待和高手一起探讨。
转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美