如果有只时光鸡 － 语义化的感悟

本篇杂记主要是近期编写前端代码的一次小小的总结，对于语义化感悟最深莫过于本人，但恰恰以前没接触过这块，所以近期越来越深刻。

语义化的好处：
1/ 便于更好的SEO - 搜索引擎爬取和收录
2/ 好的逻辑便于管理 － 对于页面代码的掌控
3/ 更好的阅读和维护 － 代码不仅仅是自己看更便于后来者阅读和管理、维护、扩展。

从广义上来说，不仅要使机器（搜索引擎等）易于理解，也要使人易于理解。在团队协作开发中，对人的易于理解显得尤为重要了，一个莫名其妙的 class 会让后续的开发或者维护者一头雾水，增加了协作成本。

先说下标签，举个栗子：

<article>
<h1>xxxx百科</h1>
<h1>xxx来源</h1>
</article>

image.png

当时真想给那写如此代码的人踹上两脚，同时另外一个人还告诉我，为什么不可以写2个h1呢？语义化本来就是用来裸读的！ 我当时听到这句话就炸了！听我一句话，以后你的上级或者公司最好不要有懂seo的，不然你这一辈子都得背锅。

1. 一个页面只能有一个h1
2. 许多大公司如百度，网易等甚至在很多页面不用h1标签，甚至很谨慎的使用
3. 过多的h1可能还会导致k站，别问我为什么，自己百度一下后果多严重。

w3c在发布html5之后更加的注重语义化，从增加的多个标签就完全可以看出来。

<article>  定义文章
<aside> 定义页面内容之外的内容
<audio>  声音内容
<canvas> 图形
<command> 定义命令
<header> 页眉
<footer> 页脚
等等，几乎都是英文一一对应的

image.png

接下来说说class 类名，规范化书写

<div class="skill-list">
    <div class="skill-item">
        <h3 class="item-tt">PS</h3>
        <p class="item-detail">基本切图</p>
    </div>
    <span class="skill-summary">了解</span>
</div>

大脑渲染：
技能列表> 技能物品>｛物品名称，物品详情｝ ， 技能概况

<div class="experience-item">
    <p class="item-time">2014.08 — 至今</p>
    <h3 class="item-name">腾讯科技(深圳)有限公司／产品策划</h3>
    <div class="item-desc">负责腾讯课堂教研功能的策划； 能熟练对接用户及运营侧，规划版本，推进需求落地，并根据数据及用户反馈优化功能； 所负责功能覆盖PC客户端、PCWeb、APP、H5。</div>
</div>

大脑渲染：
项目经验 － 项目时间，项目名称，项目详情

ok，我们最后再来一个

 <div class="article-wrap">
     <a href="#" class="article article--one">
          <h1 class="article-tt">腾讯要做"零配件"？马化腾这样说</h1>
          <div class="article-date">4月20日</div>
          <div class="article-img-wrap">
              ![微信图片](https://img.haomeiwen.com/i3864808/20348380035d4344.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
          </div>
                <div class="article-desc">转行？不！做我们该做的，提供一个底层基础能力。</div>
          <div class="article-more">阅读全文</div>
      </a>
</div>

外层 > {文章>标题,时间,［图片外层>图片］, 更多｝整个结构和逻辑都非常清晰，便于在编写大量的代码，自己不会突然忘记之前写的大体框架，而一起协作的人也能清晰的知道，你写的是什么，这些是做什么的。

最后说说备注
为什么备注要拿来最后说，因为即便语义化用的好，结构到位，犹豫大型的开发项目种，代码量是非常大的，对于阅读的负担也很重，所以需要备注作为书签，让人知道这一大块究竟是做什么的。

<meta charset="UTF-8">
<!-- viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- title 设置 -->
<title>bilibili -  魔王大乱斗</title>
<!-- css 引入，common + style -->
<link rel="stylesheet" href="http://xxx.com/common.css">
<link rel="stylesheet" href="style.css">

上述代码非常清晰的介绍html文档头部的分类和设置，而且不是硬邦邦的一堆代码，下面的一段代码同样如此。

/* logo 样式 */
.logo {
 /* width: 200px; */
}

语义化写的好，所有的人都愿意看，这可是技术圈子里可以拿来装逼的！！

image.png

不规范的写法，看你进坑没？
1）滥用id选择器

#layout #header #title .logo a { display: block; }

2）调用过多的class
比如我们要写个样式，之前设置了一个字体大小font, 又设置了颜色，还设置了某些样式

fonts:{font-size:16px};
color-red: {color:#f00};
vertical-style: {vertical-algin: middle};
lines:{line-heihgt: 20px};
<span class="fonts color-red vertical-style  lines">香菇，蓝兽， 你为甚么要酱紫</span>

天！你要不要把所有的标签都拿来搞一份！！！！！我再送你一只穿天猴可好？

仔细想想你是不是特别想来一只时光鸡，让时间倒退，把以前那些乱糟糟的代码重新修复下？

image.png

可惜世界没有后悔药，你的鸡已经变成了如下此物。。。

image.png

babalababa~那些年的代码，已经成为别人的饭后话题了。。。

image.png