-
Notifications
You must be signed in to change notification settings - Fork 6
Open
Description
HTML 方面:
-
不重视标签语义化;
-
喜欢滥用标签,如
<div>、<section>; -
使用已被规范废弃的标签,如
<font>、<center>; -
忘记闭合标签;
-
在
<h1>...<h6>、<p>标签里插入块级元素; -
在特定嵌套结构的容器里插入了其他标签,例如:
<dl> <dt>...</dt> <dd>...</dd> <div>hello world</div> </dl>
-
不讲究标签前后顺序,例如对外联 CSS 和 JS 资源的引入;
-
标签或属性名使用大写(或驼峰体);
-
没有可访问性的概念,例如不会使用
label标签来增加 input radio 的可点击范围; -
不 care 无障碍访问;
-
页面层级结构臃肿,标签嵌套里三层外三层;
-
喜欢使用
<!--[if IE]>这类黑魔法来处理兼容性问题; -
忘记声明 charset,导致页面乱码;
-
不写、漏写或错写
<DOCTYPE>声明; -
看了两天文档,然后在个人简历上标榜“精通HTML”。
CSS 方面:
-
一把梭的 CSS Reset:
* {margin: 0; padding: 0;}; -
喜欢写行内样式;
-
样式类名命名不符合语义,喜欢用拼音(约定俗成的除外)、无意义字符或自创的单词;
-
滥用后代选择器或子选择器,例如:
ul.list > li > .content > a {...}
-
滥用 id 选择器,滥用 !important,导致各种权重问题;
-
喜欢使用一些新特性,却没有考虑不支持时的后备方案,例如:
/* 如果浏览器不支持背景图片偏移量特性,则整条特性都会失效,导致背景图无法显示 */ .box {background: url(xxx.png) right 20px bottom 20px no-repeat;}
-
使用一些陈旧、过时的写法(有时候是直接 copy 过来懒得改),例如:
.list-item {display: inline-block; *display: inline; *zoom: 1;} .box {-webkit-border-radius: 5px;}
-
无脑将 CSS 用在明明采用 JS 方案更适合的场景中;
-
忘记清除浮动,导致布局错乱;
-
缺乏对默认属性的了解,声明一些无意义的样式,例如:
div {display: block; width: 100%; height: auto;}
JavaScript 方面:
-
滥用全局变量;
-
忘记跳出,导致 switch 穿底,例如:
let result; switch(value) { case 'A': result = 1; case 'B': result = 2; case 'C': result = 3; } console.log(result) // 永远是 3
-
忘记跳出,导致无意义的性能损耗,例如:
let result; for (let value of bigArray) { if (value.id === 'abc') { result = value.data } }
-
滥用箭头函数,例如:
function Fn(name) { this.name = name; // ... } Fn.prototype.getName = () => this.name;
-
引用类型的坑,例如:
let obj = {a: 1, b: 2}; fn1(); fn2(); function fn1() { let other = obj; other.a = 3; // ... } function fn2() { console.log(obj.a) // 3 (黑人问号脸.jpg) }
-
未考虑 0 会隐式转换为 false 的情况,例如:
function fn(delay) { if (!delay) { delay = 1000; // 如果未定义 delay,默认为 1s } setTimeout(() => { // ... }, delay) } fn(); fn(0); // 预期:无等待时间;结果:等待了 1s
-
switch 的 case 会进行强类型判断,例如:
function fn(value) { switch(value) { case 1: return 'A'; case 2: return 'B'; default: return 'Other' } } fn('1'); // 结果不是预期的 "A",而是 "Other"
未完待续
Metadata
Metadata
Assignees
Labels
No labels