资讯专栏INFORMATION COLUMN

CSS团队协作规范

firim / 1805人阅读

摘要:的命名必须是行为有语意的。前端工程师拿到视觉图,开始写时以手机版为第一优先。手机开启网页很吃手机效能和网络状况,前端工程师一开始就以手机版为优先,可以让一开始载入,使用最少的效能快速载入网页。

命名禁止缩写

精简扼要地对class命名,请勿使用自定义缩写。

class name的命名必须是行为、有语意的。

禁止在非特殊情况下写!important

CSS本身有权重设计,任意地使用!important会造成权重混乱而无法维护。

不可轻易限定宽高

用户可以自行设定自己的浏览器,例如Android手机可以设定显示字体大小,写死的高度会让字体相互重叠。

RWD失效

移动设备的高度是无限的,宽度是有限的。

请不要把宽写死。

img请让它自动缩放

请不要替img的容器设定宽或高,让它根据设备自行缩放。

请使用bootstrapimg-responsive

如果确实要用:

  width: 100%;
  height: auto;

如果要给img border-radius设定样式,请使用父元素控制行为,保持img只载入图片,没有样式。

优先使用grid排版

请不要花很多时间在写media query,设定一堆breakpoint,自己写组件样式,自己控制每种设备上的容器宽度。

请使用grid system,这些都是已经成熟的框架,而且有些也已经帮你处理了浏览器相容问题。

不可直接over write或在原本框架的class增加内容

直接写一个新的class,不要覆盖原有的设计。

不要再已有的class上添加样式,请额外多带带写一个。

设计RWD网站,请遵循移动设备优先原则

设计师的设计顺序,以桌面版优先,再设计手机版。

前端工程师拿到视觉图,开始写HTML/CSS时以手机版为第一优先。

手机开启网页很吃手机效能和网络状况,前端工程师一开始就以手机版为优先,可以让HTML一开始载入,使用最少的效能快速载入网页。当开始制作桌面版时,只会少许跑版,做适当微调即可。
相反,如果先制作桌面版,当手机版画面被切掉或是跑版,需要花更多时间去调整。

再来是iPhone手机的retina,会将图片放到手机上时自动做两倍缩小,在一开始制作时即可发现图片载入是否吃效能。为了让图片能在iPhone上有更好的体验,建议移动版优先。

不可使用html tag selector

请直接定义class的样式,不需要指定html tag

层级不可以超过三层

超过三层表示耦合度太高,不具有弹性、可维护性。

用一样的element时不要把一堆东西全部写在里面,请把排版相关的独立出来

border-radius写在img上面,请把img保持干净。定位,例如position: absolute;

不要随意none掉画面上的tag或行为

请注意如果要none掉一些样式,请依照使用程度决定。

使用程度遍布整个网站,请直接使用reset.css

使用程度中等以下,请定义一个class

reset.css

常见的a tag不要有underline

list消除原有样式

请在reset.css上定义,并且设为第一载入次序

有JavaScript行为的class可以为命名加入name space
#js-project-show {}
请勿任意使用br hr tag

br是换行,请使用在p tag里面,当p里面文字过多时可以使用。

hr是快速划线,但是即将被淘汰,请直接使用border写在class里面。

br必须去思考父区块是不是display: block;,如果要换行,应该思考是不是下一段文字。

线条请都是用border去写。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116398.html

相关文章

  • 优秀文章收藏(慢慢消化)持续更新~

    摘要:整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次,彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 评论0 收藏0
  • Web前端开发规范手册

    摘要:规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。 文件规范 文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

    wua_wua2012 评论0 收藏0
  • Web前端开发规范手册

    摘要:规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。 文件规范 文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

    Tamic 评论0 收藏0
  • Web前端开发规范手册

    摘要:规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。 文件规范 文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

    xiaotianyi 评论0 收藏0
  • 开发规范(三)CSS规范

    摘要:规范目前沿用规范,阅读本规范前请熟读规范补充规范阅读编码规范补充规范是指在规范上扩展的规范,部分示例中有不符合规范的,以规范为准。请熟读以上规范条例,在工作中严格遵守。 概述 为提高团队协作效率,规范文件管理,方便项目后期维护,提高代码质量,特制订此文档,前端开发人员必须遵照本规范进行前台页面开发。 CSS规范 目前沿用NEC规范,阅读本规范前请熟读 NEC规范 补充规范 阅读 CSS...

    cod7ce 评论0 收藏0

发表评论

0条评论

firim

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<