CSS模块化及多人分工协作

初冬512

初冬512

2016-02-19 16:54

今天给大家分享的是由图老师小编精心为您推荐的CSS模块化及多人分工协作,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

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

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

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

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

网上很多介绍css文件结构划分的,大致就那几个文件:layout.css/main.css/footer.css/header.css/reset.css等等,大家都说自己的好,落实都实践,才明白,没有最好的,只有最适合的。最好的样式划分,应该是紧紧依赖于HTML结构本身,不是放任四海皆的。

css文件的分布除了要便于以后的分工协作,qq表情还有灰常重要的一点:如果字节小的话,可以尽量压缩降低并发连接数,如果字节过大,可以分割,防止下载速度太慢,影响样式加载。这些就是具体问题具体对待了。比如搜索引擎和门户首页这种访问量极大的页面最好将css写入页面内部。

初步定下一下css样式结构:
  

Example Source Code

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

 实际操作起来还是会有很多问题,代码的冗余无法避免,只能最小化。为了高效有时也不得不做出牺牲。

展开更多 50%)
分享

猜你喜欢

CSS模块化及多人分工协作

Web开发
CSS模块化及多人分工协作

CSS模块化如何实现?

Web开发
CSS模块化如何实现?

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS模块化的理解

Web开发
CSS模块化的理解

CSS模块化思想的优势

Web开发
CSS模块化思想的优势

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS模块化设计——从空格谈起

Web开发
CSS模块化设计——从空格谈起

CSS模块化设计—从空格谈起

Web开发
CSS模块化设计—从空格谈起

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在C#中使用COM+实现事务控制

在C#中使用COM+实现事务控制

电脑开机后就自动断电怎么回事

电脑开机后就自动断电怎么回事
下拉加载更多内容 ↓