首页 > 教程 > 关键词  > CSS框架最新资讯  > 正文

CSS模块化及多人分工协作

2010-01-11 15:28 · 稿源:www.woaicss.com

自己对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模块化思想的优越性:便于修改,便于管理,便于多人协作。期待和高手一起探讨。

原文地址:https://www.woaicss.com/article/div/css53.htm

举报

  • 相关推荐
  • 山东一地多人哄抢掉地大蒜 后续:已追回

    近日,在山东临沂兰陵县顺和路发生了一起引人关注的事件:多位市民哄抢掉落在地的大蒜。据现场目击者描述,7月20日中午12时左右,一辆满载大蒜的货车在行驶途中因颠簸掉落了约20袋大蒜,每袋重达50斤,价值约100元。这些大蒜散落在红绿灯路口,迅速吸引了周围路过的市民。 视频资料显示,事件发生后,不少市民纷纷上前哄抢大蒜,有人甚至将大蒜搬上自己的三轮车。�

  • 锐捷网络重磅发布RG-UNC CS网络数字化平台:四大核心能力重塑企业网络管理新范式

    锐捷发布RG-UNC网络数字化平台CS系列产品,通过全网统一融合管理、组网编排及自动化部署、便捷准入与访问控制、全链业务保障与可视四大核心能力,重新定义企业网络管理标准。该平台基于微服务架构打造,支持服务组件灵活扩展与故障自愈,兼容第三方系统,满足不同规模客户需求。CS系列面向大中型园区,支持"管、控、析、维、营"全生命周期管理;AS系列作为轻量化衍生品,适合中小型园区。产品实现分钟级上线、策略随行、业务一键逃生等功能,显著提升网络部署效率与运维体验。

  • AI深度赋能!itc智慧会议室重构协作场景,打造沉浸式会议新范式

    ITC保伦股份将AI技术深度融入音视频会议系统,推出三大智能化升级方案:1)AI+远程视频会议系统实现98%准确率的实时语音转写、跨语言同声传译、4K超分画质和人脸识别签到功能;2)AI+智慧会议平板集成降噪、声源追踪技术,自动生成结构化会议纪要;3)AI+分布式综合管理平台具备50余种智能监测分析能力,支持应急指挥决策。通过AI赋能会议全流程,打造"会前-会中-会后"闭环,推动企业数字化协作升级,引领智慧会议行业变革。

  • 破局产能焦虑!忆联全国产SSD M.2自动化方案驱动生产效率跃升

    忆联推出国内首个SSD M.2自动化解决方案,通过一体化测试平台、智能制造系统和MES系统协同,显著提升生产效率:单线UPH达480PCS/H,较人工提升50%;人力成本节省2人/台/天;产品不良率降至近100PPM。方案采用双六轴机械臂与AI视觉定位技术,支持多规格M.2 SSD混线生产,实现全流程数据追溯。该方案已成功保障多款主力SSD产品在销售旺季的高效交付,获得头部客户认可,助力国�

  • 男子误把乙醇当汽油 点火时引火烧身:致多人受伤

    ​近日,湖北发生一起因误认化学物质而引发的意外事故。一名男子在与妻子争执过程中,不慎将乙醇当作汽油,使用打火机点火后引发爆燃,导致自身衣物燃烧,并殃及周围多名围观群众,造成多人烧伤。 据目击者描述,事发当天,村里的修车铺如常营业。一名穿蓝色上衣的村民与修车师傅就乙醇是否为汽油的话题展开了激烈争论,吸引了众多村民围观。在争论过程中,该

  • 微云全息(NASDAQ: HOLO)引领加密货币预测新纪元:HNFCS技术揭秘

    微云全息(NASDAQ:HOLO)开发了混合神经模糊控制系统(HNFCS),结合神经网络学习能力和模糊逻辑灵活性,能有效预测比特币等加密货币价格波动。该系统通过处理海量市场数据,动态调整预测模型,克服了传统方法在样本外预测和超时预测准确性方面的局限。HNFCS技术优势在于其自适应性和实时性,可扩展应用于多种金融场景,为投资者提供精准决策支持,有望成为加密货币市场的重要分析工具。

  • 从草根到顶流:抖音家族化带货天团的崛起

    ​抖音电商又出现了新的“头部主播”。 今年6月,@李宝宝 以单日1.5亿销售额的成绩登顶抖音电商带货榜,引发行业关注。 卡思注意到,这不仅是个人的成功,还是一个家族带货团的崛起——这个来自河南濮阳农村的家族,以@董艳颖 为主导,从零起步,通过短视频和直播电商实现了阶层的跨越,创造了"批量制造百万富翁"的商业奇迹。 他们用最接地气的方式找到直

  • 阿里云vTrus SSL证书夏季大促,最高直降60%!

    阿里云推出vTrus+SSL证书服务,简化HTTPS部署流程,提升云上证书管理效率。该国产证书已通过国际WebTrust认证,兼容360、奇安信等主流浏览器,并深度参与Tongsuo开源社区建设。2025年7月1日至31日,阿里云推出SSL证书限时优惠活动:GeoTrust证书首购4折起,全系列证书享"新老同享"75折优惠,助力企业实现安全高效的国产化证书部署需求。

  • 邦彦技术&城银股份达成合作:以邦彦云PC重塑医疗信息化底座

    2025年7月14日,城银股份与邦彦技术签署合作协议,共同推进智慧医疗发展。城银深耕医疗信息化17年,将把邦彦云PC纳入全线智慧医疗解决方案的桌面标准;邦彦承诺投入专项资源,将云PC打造为行业标杆。邦彦云PC结合本地性能与云端管控,解决医疗场景对影像秒开、外设兼容、数据安全三大需求。双方将通过技术、场景、生态协同,推动云PC在智慧医院、养老、公卫等场景落地,重塑医疗信息化基础设施,共建面向未来的数字健康底座。

  • 上海多人暴雨中排队喝零下80度咖啡 店长:日销量最低500杯

    ​近日,上海永康路一家咖啡店门口的景象格外引人注目。一场暴雨过后,街边仍残留着积水,可咖啡店前却早已排起了长长的队伍。令人惊讶的是,这队伍在暴雨倾盆时便已开始陆续聚集。 现场,有人手持雨伞,在雨中耐心等候;还有人拖着行李箱,匆匆赶来,只为品尝一杯当下上海咖啡界的新晋顶流——“零下80度dirty”咖啡。自上海入夏以来,这款咖啡的人气持续攀升,�