Web开发六大规范(中)

咱们接着昨天的学~

3.CSS书写规范

基本原则:

样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例:“ .shadow ”文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:“ .no12 ” 、“ .no12-24 ”

HTML样式为设计师重新定义已有的HTML标签样式,影响全部的被设定标签样式,用于统一网页中某一标签的样式定义。样式名“HTML标签”例:hr { border: 1px dotted #333333 }

状态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。该样式写法有2种: a.nav:link nav.a:link 第一种只能修饰标签中;第二种可以修饰所有包含有标签的其他标签。

页面内的样式加载必须用链接方式

注意事项:

ID和class的命名:ID和class(类)名使用可以反应元素目的和用途的名称,或其他通用名称。使用具体且反映元素目的的名称,这些是最容易理解的,而且发生变化的可能性最小。

通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义。

ID命名要注意明确性及唯一性;class命名要注意通用性及复用性。

合理的避免使用ID:ID不应该被应用于样式。因为ID的样式不能被复用并且每个页面中你只能使用一次ID。只有为了确定网页或整个站点中的唯一有效位置时才使用ID。

尽可能的精确:很多前端开发人员写选择器链的时候不使用直接子选择器,导致疼痛的设计问题并且有时候可能会很耗性能。

如果不是需要匹配到DOM末端的选择器, 应该使用直接子选择器。

单位:省略“0”值后面的单位。不要在0值后面使用单位,除非有值。同时在有可能的情况下使用3个字符的十六进制表示法,例如颜色单位。

声明顺序:为了保证更好的可读性和可扫描性,样式声明应该首先声明结构性属性:1.display;2.position.left.top.right等;3:overflow,float.clear等;4.margin.padding; 其次声明表现性属性:1.background,border;2.font.text;

Css引用:属性选择器或属性值用双引号(“”),而不是单引号(“)括起来。URI值(url())不要使用引号。

4.JavaScript书写规范

书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);

变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量.

类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

函数命名: 首字母小写驼峰式命名. 如iTaoLun();

命名语义化, 尽可能利用英文单词或其缩写;

尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;

后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

代码结构明了, 加适量注释. 提高函数重用率;

注重与html分离, 减小reflow, 注重性能

六大规范还剩最后两个

明天再继续学习:

注释规范、图片规范

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180822G1MXGG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券