前端笔记.一

什么是组件化Css？什么又叫语义化的Html？

你是否见过如下代码

<div class="wrapper">
  <div class="content_1">
    <div class="title_content1">
      <p class="p_con_tit_1">text</p>
    </div>
    <div class="box_content1">
      <p class="p_con_box_1">text</p>
    </div>
  </div>
  <div class="content_2">
  </div>
  <div class="content_3">
  </div>
</div>

好？不好？
“我现在就这么写！怎么了？”其实我2年前也这么写。哪不好？

首先，全文除了div和p我看不到任何其他Html标签，我不知道h1~h4究竟哪去了，也不知道dl dt dd被放在哪个角落里发呆了。

其次，css杂乱无章，也许你可以大概明白它的意思，可是你没觉得它太啰嗦而且不连贯么？谁给你“擦屁股”谁倒了血霉啊。。

在看下面代码：

<div class="wrapper">
  <dl class="content sam">
    <dt class="sam-title">text</dt>
    <dd class="sam-desc">text</dd>
  </dl>
  <dl class="content sam">
    <dt class="sam-title">text</dt>
    <dd class="sam-desc">text</dd>  
  </dl>
  <dl class="content sam fun">
    <dt class="sam-title">text</dt>
    <dd class="sam-desc">text</dd>
  </dl>
</div>

 如此，我不需要说任何东西了吧？

还有人会说 .sam dt{} 不得了么 写个 sam-title 有毛病啊。

ok，这是另外一个问题了，组件化。。

哪天你的sam不再是dl而是ul,dt不再是dt而是li，你会咋办？一行一行的去改你的dt和dd吧。。

你是愿意多写几个字符让代码一眼即可看懂，而且一劳永逸，还是改一次你回忆一次你当初怎么想的，你的样式放在多少行来回来去的纠结？

so~就说到这。。