前端指南 – HTML/CSS/Javascript[WEB前端]

前端指南 - HTML/CSS/Javascript

前端指南 – HTML/CSS/Javascript[WEB前端]

无规矩不成方圆,一起来看看大神的经验。

HTML

语义

HTML5 为我们提供了许多语义元素,旨在精确描述内容。确保你受益于它丰富的词汇。

  1. <!-- bad -->
  2. <div id=main>
  3. <div class=article>
  4. <div class=header>
  5. <h1>Blog post</h1>
  6. <p>Published: <span>21st Feb, 2015</span></p>
  7. </div>
  8. <p></p>
  9. </div>
  10. </div>
  11. <!-- good -->
  12. <main>
  13. <article>
  14. <header>
  15. <h1>Blog post</h1>
  16. <p>Published: <time datetime=2015-02-21>21st Feb, 2015</time></p>
  17. </header>
  18. <p></p>
  19. </article>
  20. </main>

确保您了解正在使用的元素的语义。用错误的方式使用语义元素比保持中立更糟糕。

  1. <!-- bad -->
  2. <h1>
  3. <figure>
  4. <img alt=Company src=logo.png>
  5. </figure>
  6. </h1>
  7.  
  8. <!-- good -->
  9. <h1>
  10. <img alt=Company src=logo.png>
  11. </h1>

简洁

保持代码简洁。忘记你旧的XHTML习惯。

  1. <!-- bad -->
  2. <!doctype html>
  3. <html lang=en>
  4. <head>
  5. <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
  6. <title>Contact</title>
  7. <link rel=stylesheet href=style.css type=text/css />
  8. </head>
  9. <body>
  10. <h1>Contact me</h1>
  11. <label>
  12. Email address:
  13. <input type=email placeholder=you@email.com required=required />
  14. </label>
  15. <script src=main.js type=text/javascript></script>
  16. </body>
  17. </html>
  18. <!-- good -->
  19. <!doctype html>
  20. <html lang=en>
  21. <meta charset=utf-8>
  22. <title>Contact</title>
  23. <link rel=stylesheet href=style.css>
  24. <h1>Contact me</h1>
  25. <label>
  26. Email address:
  27. <input type=email placeholder=you@email.com required>
  28. </label>
  29. <script src=main.js></script>
  30. </html>

辅助功能

辅助功能不应该是事后考虑的。您不必是 WCAG 专家来改进您的网站,您可以立即开始修复能带来巨大变化的小事情,例如:

  • 学习正确使用属性alt
  • 确保您的链接和按钮被标记为此类(无暴行)<div class=button>
  • 不完全依靠颜色来传达信息
  • 明确标记表单控件
  1. <!-- bad -->
  2. <h1><img alt=Logo src=logo.png></h1>
  3. <!-- good -->
  4. <h1><img alt=Company src=logo.png></h1>

语言和字符编码

虽然定义语言是可选的,但建议始终在根元素上声明它。

HTML 标准要求页面使用 UTF-8 字符编码。必须声明它,虽然可以在内容类型 HTTP 标头中声明它,但建议始终在文档级别声明它。

  1. <!-- bad -->
  2. <!doctype html>
  3. <title>Hello, world.</title>
  4. <!-- good -->
  5. <!doctype html>
  6. <html lang=en>
  7. <meta charset=utf-8>
  8. <title>Hello, world.</title>
  9. </html>

性能

除非在内容之前加载脚本有正当理由,否则不要阻止页面的呈现。如果样式表很重,请隔离最初绝对必需的样式,并推迟在单独的样式表中加载辅助声明。两个 HTTP 请求明显慢于一个请求,但速度感知是最重要的因素。

  1. <!-- bad -->
  2. <!doctype html>
  3. <meta charset=utf-8>
  4. <script src=analytics.js></script>
  5. <title>Hello, world.</title>
  6. <p>...</p>
  7. <!-- good -->
  8. <!doctype html>
  9. <meta charset=utf-8>
  10. <title>Hello, world.</title>
  11. <p>...</p>
  12. <script src=analytics.js></script>

CSS

分号

虽然分号在技术上是 CSS 中的分隔符,但始终将其视为终止符。

  1. /* bad */
  2. div {
  3. color: red
  4. }
  5. /* good */
  6. div {
  7. color: red;
  8. }

箱模型

理想情况下,整个文档的框模型应相同。全局是好的,但如果可以避免,则不要更改特定元素上的默认框模型。* { box-sizing: border-box; }

  1. /* bad */
  2. div {
  3. width: 100%;
  4. padding: 10px;
  5. box-sizing: border-box;
  6. }
  7. /* good */
  8. div {
  9. padding: 10px;
  10. }

Flow

如果可以避免元素的默认行为,请不要更改它。尽可能多地将元素保留在自然文档流中。例如,删除图像下方的空白不应使您更改其默认显示:

  1. /* bad */
  2. img {
  3. display: block;
  4. }
  5.  
  6. /* good */
  7. img {
  8. vertical-align: middle;
  9. }

同样,如果可以避免元素,请不要从流中取下元素。

  1. /* bad */
  2. div {
  3. width: 100px;
  4. position: absolute;
  5. right: 0;
  6. }
  7. /* good */
  8. div {
  9. width: 100px;
  10. margin-left: auto;
  11. }

定位

有许多方法可以定位 CSS 中的元素。青睐现代布局规范(如 Flexbox 和 Grid),并避免从普通文档流中删除元素,例如使用 。position: absolute

选择

最小化与 DOM 紧密耦合的选择器。考虑在选择器超过 3 个结构伪类、后代或同级组合器时,将类添加到要匹配的元素。

  1. /* bad */
  2. div:first-of-type :last-child > p ~ *
  3. /* good */
  4. div:first-of-type .info

避免在不需要时使选择器过载。

  1. /* bad */
  2. img[src$=svg], ul > li:first-child {
  3. opacity: 0;
  4. }
  5. /* good */
  6. [src$=svg], ul > :first-child {
  7. opacity: 0;
  8. }

特 异性

不要使值和选择器难以覆盖。尽量减少 的 和 的 使用。id!important

  1. /* bad */
  2. .bar {
  3. color: green !important;
  4. }
  5. .foo {
  6. color: red;
  7. }
  8. /* good */
  9. .foo.bar {
  10. color: green;
  11. }
  12. .foo {
  13. color: red;
  14. }

重写

重写样式使选择器和调试更加困难。尽可能避免。

  1. /* bad */
  2. li {
  3. visibility: hidden;
  4. }
  5. li:first-child {
  6. visibility: visible;
  7. }
  8. /* good */
  9. li + li {
  10. visibility: hidden;
  11. }

继承

不要复制可以继承的样式声明。

  1. /* bad */
  2. div h1, div p {
  3. text-shadow: 0 1px 0 #fff;
  4. }
  5. /* good */
  6. div {
  7. text-shadow: 0 1px 0 #fff;
  8. }

简洁

保持代码简洁。使用速记属性,避免在不需要时使用多个属性。

  1. /* bad */
  2. div {
  3. transition: all 1s;
  4. top: 50%;
  5. margin-top: -10px;
  6. padding-top: 5px;
  7. padding-right: 10px;
  8. padding-bottom: 20px;
  9. padding-left: 10px;
  10. }
  11. /* good */
  12. div {
  13. transition: 1s;
  14. top: calc(50% - 10px);
  15. padding: 5px 10px 20px;
  16. }

语言

比起数学,更喜欢英语。

  1. /* bad */
  2. :nth-child(2n + 1) {
  3. transform: rotate(360deg);
  4. }
  5. /* good */
  6. :nth-child(odd) {
  7. transform: rotate(1turn);
  8. }

供应商前缀

积极终止过时的供应商前缀。如果需要使用它们,请在标准属性之前插入它们。

  1. /* bad */
  2. div {
  3. transform: scale(2);
  4. -webkit-transform: scale(2);
  5. -moz-transform: scale(2);
  6. -ms-transform: scale(2);
  7. transition: 1s;
  8. -webkit-transition: 1s;
  9. -moz-transition: 1s;
  10. -ms-transition: 1s;
  11. }
  12. /* good */
  13. div {
  14. -webkit-transform: scale(2);
  15. transform: scale(2);
  16. transition: 1s;
  17. }

动画

有利于转换而不是动画。避免对 和 以外的其他属性进行动画处理。opacitytransform

  1. /* bad */
  2. div:hover {
  3. animation: move 1s forwards;
  4. }
  5. @keyframes move {
  6. 100% {
  7. margin-left: 100px;
  8. }
  9. }
  10. /* good */
  11. div:hover {
  12. transition: 1s;
  13. transform: translateX(100px);
  14. }

单位

可以时使用无单位值。如果您使用相对单位,则有利。首选秒数而不是毫秒。rem

  1. /* bad */
  2. div {
  3. margin: 0px;
  4. font-size: .9em;
  5. line-height: 22px;
  6. transition: 500ms;
  7. }
  8. /* good */
  9. div {
  10. margin: 0;
  11. font-size: .9rem;
  12. line-height: 1.5;
  13. transition: .5s;
  14. }

颜色

如果需要透明度,请使用 。否则,始终使用十六进制格式。rgba

  1. /* bad */
  2. div {
  3. color: hsl(103, 54%, 43%);
  4. }
  5. /* good */
  6. div {
  7. color: #5a3;
  8. }

绘图

当资源易于使用 CSS 进行复制时,请避免 HTTP 请求。

  1. /* bad */
  2. div::before {
  3. content: url(white-circle.svg);
  4. }
  5. /* good */
  6. div::before {
  7. content: "";
  8. display: block;
  9. width: 20px;
  10. height: 20px;
  11. border-radius: 50%;
  12. background: #fff;
  13. }

黑客

不要使用它们。

  1. /* bad */
  2. div {
  3. // position: relative;
  4. transform: translateZ(0);
  5. }
  6. /* good */
  7. div {
  8. /* position: relative; */
  9. will-change: transform;
  10. }

Javascript

性能

比起性能,更有利于可读性、正确性和表达性。JavaScript 基本上永远不会成为您的性能瓶颈。而是优化图像压缩、网络访问和 DOM 回流等内容。如果您只记住本文档中的一个准则,请选择此准则。

  1. // bad (albeit way faster)
  2. const arr = [1, 2, 3, 4];
  3. const len = arr.length;
  4. var i = -1;
  5. var result = [];
  6. while (++i < len) {
  7. var n = arr[i];
  8. if (n % 2 > 0) continue;
  9. result.push(n * n);
  10. }
  11. // good
  12. const arr = [1, 2, 3, 4];
  13. const isEven = n => n % 2 == 0;
  14. const square = n => n * n;
  15. const result = arr.filter(isEven).map(square);

无 国籍

尽量保持功能纯净。理想情况下,所有函数都不应产生副作用,不使用外部数据并返回新对象,而不是突变现有对象。

  1. // bad
  2. const merge = (target, ...sources) => Object.assign(target, ...sources);
  3. merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }
  4. // good
  5. const merge = (...sources) => Object.assign({}, ...sources);
  6. merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

当地人

尽可能依赖本机方法。

  1. // bad
  2. const toArray = obj => [].slice.call(obj);
  3. // good
  4. const toArray = (() =>
  5. Array.from ? Array.from : obj => [].slice.call(obj)
  6. )();

强制

在有意义的时候接受隐含的胁迫。否则避免。不要货物崇拜。

  1. // bad
  2. if (x === undefined || x === null) { ... }
  3. // good
  4. if (x == undefined) { ... }

循环

不要使用循环,因为它们会强制您使用可变对象。依赖于方法。array.prototype

  1. // bad
  2. const sum = arr => {
  3. var sum = 0;
  4. var i = -1;
  5. for (;arr[++i];) {
  6. sum += arr[i];
  7. }
  8. return sum;
  9. };
  10. sum([1, 2, 3]); // => 6
  11. // good
  12. const sum = arr =>
  13. arr.reduce((x, y) => x + y);
  14. sum([1, 2, 3]); // => 6

如果你不能,或者使用方法可以说是滥用,使用递归。array.prototype

  1. // bad
  2. const createDivs = howMany => {
  3. while (howMany--) {
  4. document.body.insertAdjacentHTML("beforeend", "<div></div>");
  5. }
  6. };
  7. createDivs(5);
  8. // bad
  9. const createDivs = howMany =>
  10. [...Array(howMany)].forEach(() =>
  11. document.body.insertAdjacentHTML("beforeend", "<div></div>")
  12. );
  13. createDivs(5);
  14. // good
  15. const createDivs = howMany => {
  16. if (!howMany) return;
  17. document.body.insertAdjacentHTML("beforeend", "<div></div>");
  18. return createDivs(howMany - 1);
  19. };
  20. createDivs(5);

下面是一个通用循环函数,使递归更易于使用。

参数

忘记对象。其余参数始终是一个更好的选项,因为:arguments

  1. 它的名字,所以它给你一个更好的想法,函数期待的参数
  2. 它是一个真正的数组,这使得它更容易使用。
  1. // bad
  2. const sortNumbers = () =>
  3. Array.prototype.slice.call(arguments).sort();
  4. // good
  5. const sortNumbers = (...numbers) => numbers.sort();

应用

忘记 。改用点差运算符。apply()

  1. const greet = (first, last) => `Hi ${first} ${last}`;
  2. const person = ["John", "Doe"];
  3. // bad
  4. greet.apply(null, person);
  5. // good
  6. greet(...person);

绑定

当有一个更惯用的方法时,不要这样做。bind()

  1. // bad
  2. ["foo", "bar"].forEach(func.bind(this));
  3. // good
  4. ["foo", "bar"].forEach(func, this);
  1. // bad
  2. const person = {
  3. first: "John",
  4. last: "Doe",
  5. greet() {
  6. const full = function() {
  7. return `${this.first} ${this.last}`;
  8. }.bind(this);
  9. return `Hello ${full()}`;
  10. }
  11. }
  12. // good
  13. const person = {
  14. first: "John",
  15. last: "Doe",
  16. greet() {
  17. const full = () => `${this.first} ${this.last}`;
  18. return `Hello ${full()}`;
  19. }
  20. }

高阶函数

不必嵌套函数。

  1. // bad
  2. [1, 2, 3].map(num => String(num));
  3. // good
  4. [1, 2, 3].map(String);

组成

避免多次嵌套函数调用。改用合成。

  1. const plus1 = a => a + 1;
  2. const mult2 = a => a * 2;
  3. // bad
  4. mult2(plus1(5)); // => 12
  5. // good
  6. const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val);
  7. const addThenMult = pipeline(plus1, mult2);
  8. addThenMult(5); // => 12

缓存

缓存功能测试、大型数据结构和任何昂贵的操作。

  1. // bad
  2. const contains = (arr, value) =>
  3. Array.prototype.includes
  4. ? arr.includes(value)
  5. : arr.some(el => el === value);
  6. contains(["foo", "bar"], "baz"); // => false
  7. // good
  8. const contains = (() =>
  9. Array.prototype.includes
  10. ? (arr, value) => arr.includes(value)
  11. : (arr, value) => arr.some(el => el === value)
  12. )();
  13. contains(["foo", "bar"], "baz"); // => false

变量

一遍又一遍地偏袒。constletletvar

  1. // bad
  2. var me = new Map();
  3. me.set("name", "Ben").set("country", "Belgium");
  4. // good
  5. const me = new Map();
  6. me.set("name", "Ben").set("country", "Belgium");

条件

如果(否则)和切换语句,则支持 IIFE 并返回语句。

  1. // bad
  2. var grade;
  3. if (result < 50)
  4. grade = "bad";
  5. else if (result < 90)
  6. grade = "good";
  7. else
  8. grade = "excellent";
  9. // good
  10. const grade = (() => {
  11. if (result < 50)
  12. return "bad";
  13. if (result < 90)
  14. return "good";
  15. return "excellent";
  16. })();

对象迭代

尽可能避免。for...in

  1. const shared = { foo: "foo" };
  2. const obj = Object.create(shared, {
  3. bar: {
  4. value: "bar",
  5. enumerable: true
  6. }
  7. });
  8. // bad
  9. for (var prop in obj) {
  10. if (obj.hasOwnProperty(prop))
  11. console.log(prop);
  12. }
  13. // good
  14. Object.keys(obj).forEach(prop => console.log(prop));

对象作为地图

虽然对象具有合法的用例,但地图通常是更好、更强大的选择。当有疑问时,请使用 。Map

  1. // bad
  2. const me = {
  3. name: "Ben",
  4. age: 30
  5. };
  6. var meSize = Object.keys(me).length;
  7. meSize; // => 2
  8. me.country = "Belgium";
  9. meSize++;
  10. meSize; // => 3
  11. // good
  12. const me = new Map();
  13. me.set("name", "Ben");
  14. me.set("age", 30);
  15. me.size; // => 2
  16. me.set("country", "Belgium");
  17. me.size; // => 3

咖喱

对于许多开发人员来说,咖喱是一种强大但外国的模式。不要滥用它,因为它适当的用例是相当不寻常的。

  1. // bad
  2. const sum = a => b => a + b;
  3. sum(5)(3); // => 8
  4. // good
  5. const sum = (a, b) => a + b;
  6. sum(5, 3); // => 8

可读性

不要使用看似聪明的技巧来混淆代码的意图。

  1. // bad
  2. foo || doSomething();
  3. // good
  4. if (!foo) doSomething();
  1. // bad
  2. void function() { /* IIFE */ }();
  3. // good
  4. (function() { /* IIFE */ }());
  1. // bad
  2. const n = ~~3.14;
  3. // good
  4. const n = Math.floor(3.14);

代码重用

不要害怕创建大量小型、高度可组合和可重用的功能。

  1. // bad
  2. arr[arr.length - 1];
  3. // good
  4. const first = arr => arr[0];
  5. const last = arr => first(arr.slice(-1));
  6. last(arr);
  1. // bad
  2. const product = (a, b) => a * b;
  3. const triple = n => n * 3;
  4. // good
  5. const product = (a, b) => a * b;
  6. const triple = product.bind(null, 3);

依赖

最小化依赖项。第三方是你不知道的代码。不要只加载整个库,只需几种方法即可轻松复制:

  1. // bad
  2. var _ = require("underscore");
  3. _.compact(["foo", 0]));
  4. _.unique(["foo", "foo"]);
  5. _.union(["foo"], ["bar"], ["foo"]);
  6. // good
  7. const compact = arr => arr.filter(el => el);
  8. const unique = arr => [...new Set(arr)];
  9. const union = (...arr) => unique([].concat(...arr));
  10. compact(["foo", 0]);
  11. unique(["foo", "foo"]);
  12. union(["foo"], ["bar"], ["foo"]);

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    WEB前端

    Vux:基于Vue和WeUI的移动UI组件[移动UI组件]

    2020-6-2 11:44:06

    WEB前端

    小詹学Python写了个Chrome插件,一键下载Pornhub视频![Chrome插件JS教程]

    2020-6-22 17:36:59

    本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
    ⚠️
    本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
    若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索