CSS模塊化重構(gòu)

CSS模塊化

Sss Component Rules

早期CSS存在的問題

body {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

.box {
  background: #333;
  color: #fff;
}

.box .list {
  margin-left: 10px;
}

.box .list .item {
  border-bottom: 1px solid #ccc;
}

.box .list .item:last-child {
  border-bottom: 0;
}

.box .list .item a {
  text-decoration: none;
  color: #fff;
}

.box .list .item span {
  color: red;
}

選擇器繁瑣冗長
空間順序混淆：越來越長的選擇器容易使我們混淆dom的空間順序则吟，無法看清平級(jí)的選擇器的關(guān)系铅辞，是父子還是兄弟元素仅政？
維護(hù)困難：假設(shè)我們需要重構(gòu)這個(gè)box炫七，在.box和.list之間加入一層.wrap啦撮，在.item與a和span之間加入一層.block谁撼，需要謹(jǐn)慎地找到確切的位置，然后再找到所有匹配的舟肉、長長的選擇器，在合適的位置全部做修改查库；
難以復(fù)用：如果另外一個(gè)頁面也需要這個(gè)box路媚，需要把所有跟box相關(guān)的部分復(fù)制粘貼一份，同時(shí)修改時(shí)樊销，又要重新找出所有用到這個(gè)box的地方整慎，然后又是復(fù)制粘貼一份；

代碼復(fù)用

只需要提供一個(gè)公共css庫围苫，來存放我們的公共樣式以及公共模塊即可：

/* common.css */

body {
  background: #fff;
  color: #333;
  font-size: 16px;
}

.box ... {
  background: #333;
  color: #fff;
  ...
}

.another-box ... {
  ...
}

在其他的css文件中引用這個(gè)common.css裤园，這樣就實(shí)現(xiàn)了代碼的復(fù)用。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>index</title>
  <link rel="stylesheet" type="text/css" href="./style/common.css">
  <link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
  <div class="box">
    ...
  </div>
  <div class="another-box">
    ...
  </div>
</body>
</html>

問題所在

上述CSS復(fù)用看起來很完美剂府，但是討論以下問題：

體積問題：假設(shè)我們這個(gè)項(xiàng)目非常大拧揽，大概有20個(gè)頁面這么多，那么我們每做一個(gè)頁面就會(huì)往common里面補(bǔ)充3～4個(gè)公共樣式/模塊腺占，那么在這個(gè)項(xiàng)目開發(fā)完成以后淤袜，common的體積可能要比其他css的體積都大；
冗余問題：假設(shè)有幾個(gè)這樣的頁面湾笛，他們本身內(nèi)容非常少饮怯，比如404頁面，可能只需要用到少量的公共樣式嚎研，但是由于考慮到維護(hù)問題蓖墅，我們還是要引入common（單獨(dú)寫樣式會(huì)使得該頁面在common更新的時(shí)候無法同步得到更新），這就使得一個(gè)頁面變得很“重”临扮；
命名問題：由于common越寫越大论矾，它所占用的命名就越多，那么我們在引入common的時(shí)候杆勇，即使我們頁面還什么都沒有贪壳，但已經(jīng)默認(rèn)被占用了很多的命名，使得我們在某個(gè)頁面的可用命名變少蚜退，而且是越來越少闰靴；
重名問題：我們在common中書寫公共模塊，在具體頁面的私有css里書寫私有模塊钻注，假設(shè)現(xiàn)在我們需要全局添加一個(gè)公共模塊.nice-box蚂且，我們發(fā)現(xiàn)，這個(gè)模塊名已經(jīng)在index.css中被占用了幅恋，于是我們試著把名字改成.handsome-box杏死，卻又發(fā)現(xiàn)這個(gè)名字在about.css中被占用了

CSS編程規(guī)劃

規(guī)定頁面由且只由幾種基本結(jié)構(gòu)體構(gòu)成：框架、模塊，以及元件淑翼。其他零散的元素腐巢，除了是作為模塊的輔助類，否則不能獨(dú)立于這三者存在玄括。

框架

框架是指構(gòu)成頁面的基礎(chǔ)結(jié)構(gòu)冯丙，它是一個(gè)頁面的筋骨。我們假設(shè)有個(gè)頁面index.html遭京，它的整體最外圍表現(xiàn)為一個(gè)class為.g-index的div银还，然后它由頁頭（.g-hd）、主體（.g-bd）洁墙、頁腳（.g-ft）三個(gè)部分組成：

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>index</title>
</head>
<body>
  <div class="g-index">
    <div class="g-hd"></div>
    <div class="g-bd"></div>
    <div class="g-ft"></div>
  </div>
</body>
</html>

這樣我們就大概能描繪出一個(gè)頁面的基本輪廓了。

模塊

模塊是頁面上數(shù)量最多戒财，同時(shí)也是最重要的部分热监，它是代碼復(fù)用的主體部分，是一個(gè)個(gè)按照功能劃分的區(qū)域饮寞，如導(dǎo)航欄孝扛、輪播圖、登錄窗口幽崩、信息列表等等苦始，模塊之間相互獨(dú)立，分布在頁面上慌申，嵌在框架的各個(gè)位置上陌选，組成一個(gè)豐富多彩的頁面。

還是以index.html為例蹄溉，我們假設(shè)頁頭有個(gè)導(dǎo)航欄模塊（.m-nav）咨油，主體有個(gè)新聞列表模塊（.m-news），頁腳有個(gè)版權(quán)聲明模塊（.m-copy_right）：

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>index</title>
</head>
<body>
  <div class="g-index">
    <div class="g-hd">
      <div class="m-nav">
        nav
      </div>
    </div>
    <div class="g-bd">
      <div class="m-news">
        news
      </div>
    </div>
    <div class="g-ft">
      <div class="m-copy_right">
        copy_right
      </div>
    </div>
  </div>
</body>
</html>

元件

元件是獨(dú)立的柒爵、可重復(fù)使用的役电，并且在某些情況下可以作為模塊的組成部分的一種細(xì)顆粒。比如一個(gè)按鈕棉胀，一個(gè)logo等等法瑟。某種意義上說，它其實(shí)可以等同于模塊唁奢，因?yàn)樗鼈儍烧叩膮^(qū)別只是規(guī)模不同而已霎挟。模塊更強(qiáng)調(diào)一個(gè)功能完整的整體，而元件則更強(qiáng)調(diào)獨(dú)立性驮瞧。

我們假設(shè)這個(gè)頁面還需要在頁頭放個(gè)logo（.u-logo）氓扛，在導(dǎo)航欄中放置一個(gè)登錄按鈕（.u-login_btn）：

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>index</title>
</head>
<body>
  <div class="g-index">
    <div class="g-hd">
      <img class="u-logo" alt="logo">
      <div class="m-nav">
        nav
        <a href="/logoin" class="u-login_btn">登錄</a>
      </div>
    </div>
    <div class="g-bd">
      <div class="m-news">
        news
      </div>
    </div>
    <div class="g-ft">
      <div class="m-copy_right">
        copy_right
      </div>
    </div>
  </div>
</body>
</html>

命名規(guī)范

為了更好地標(biāo)志一個(gè)結(jié)構(gòu)體，更好地展示它的功用，以語義化的方式采郎，實(shí)現(xiàn)隔離作用千所，起到類似命名空間的效果。

框架的命名以g-開頭蒜埋，一般與頁面同名淫痰，比如index.html，那框架就是最外層就是.g-index整份，about.html就是.g-about待错，以此類推，其他常用的內(nèi)部結(jié)構(gòu)有.g-hd（header）烈评、.g-bd（body）火俄、.g-ft（footer）、.g-sd（side）讲冠、.g-mn（main）等等瓜客；
模塊命名以m-開頭，一般以相對(duì)應(yīng)的用途來命名竿开，比如導(dǎo)航欄m-nav谱仪、新聞m-news、版權(quán)m-copy_right等等否彩，一般來說模塊名是唯一的疯攒，而且模塊本身應(yīng)該是可移植、可復(fù)用的列荔；
元件命名以u-開頭敬尺，一般以自身含義來命名，比如u-logo表示一個(gè)logo贴浙，u-btn表示一個(gè)按鈕筷转。

除框架、模塊悬而、元件的相關(guān)命名內(nèi)容之外呜舒，命名規(guī)范還有以下幾點(diǎn)內(nèi)容：

1 . 命名盡量以縮寫的方式，言簡意賅地表達(dá)笨奠，比如用bd表達(dá)body袭蝗，用nav表達(dá)navigator等，使用長長的單詞顯得多余又臃腫般婆；
2 . 前綴與名稱之間用-連接到腥，而名稱之間的若干單詞以_連接，組合單詞除外蔚袍，如side-menu乡范；
3 . z-開頭表示狀態(tài)配名，如z-active、z-succ晋辆、z-disabled等等渠脉；
4 . 可以根據(jù)需要定制其他開頭，但是請盡量將分類控制在少數(shù)瓶佳，因?yàn)樘嗟姆诸惙炊斐衫Щ蠛筒槐匾姆诸愰_銷芋膘，其實(shí)gmuz就已經(jīng)可以滿足日常開發(fā)了。

重構(gòu)common

有了命名規(guī)范霸饲，我們可以對(duì)common進(jìn)行一次改寫：

/* common.css */

body {
  background: #fff;
  color: #333;
  font-size: 16px;
}

.m-nav { ... }

.m-news { ... }

.m-copy_right { ... }

一定程度上緩解了“污染”的問題为朋，至少按照命名規(guī)范，common構(gòu)成由原來籠統(tǒng)的一類厚脉，變成了現(xiàn)在gmuz四類习寸，變得更加可管理且“沒那么容易沖突”了，但是這還遠(yuǎn)沒有解決“污染”傻工。

以下為了方便表述融涣，把common.css稱為“common”，把對(duì)應(yīng)頁面的css精钮，比如index.html -> index.css、about.html -> about.css剃斧，稱為“頁面css”轨香。

這里有個(gè)問題需要細(xì)致思考一下：模塊的屬性。理論上講幼东，一個(gè)模塊應(yīng)該是公有或者私有的臂容，假設(shè)一個(gè)模塊它基本只可能在某個(gè)頁面用，或者我們不打算在其他頁面用到它根蟹，我們可以說這個(gè)模塊是這個(gè)頁面的私有模塊脓杉，比如文章頁里的文章列表模塊（m-article_list），以及組成這個(gè)模塊的列表單元元件（u-article_item）简逮，我們基本可以確定這兩者不會(huì)在其他頁面被復(fù)用到了球散，那么它們其實(shí)是已經(jīng)默認(rèn)私有的屬性，沒必要放在common里散庶，直接放在article.css就可以了蕉堰。這樣也可以人為地減少common的體積。那么問題來了悲龟，如果模塊既可以存放在common屋讶，又可以存放在頁面css，那么我們后續(xù)在common中添加公共模塊的時(shí)候须教，如何避免模塊名已經(jīng)在頁面css中被占用的情況皿渗？（即上文對(duì)common的設(shè)計(jì)提問的第4點(diǎn)）

初步解決方案

針對(duì)后續(xù)添加公共模塊可能與其他頁面的私有模塊命名沖突的問題進(jìn)行探討，得出兩種解決方案：

默認(rèn)由common管理所有模塊，所有模塊默認(rèn)為公共模塊乐疆，不允許私有模塊划乖；
為公共模塊單獨(dú)使用一種前綴cm-來做區(qū)分，所有m-前綴的模塊都是私有模塊诀拭。

第一種方案會(huì)使得common體積非常大迁筛，而且會(huì)一直增大，不可雀ぁ细卧；第二種方案顯式地聲明模塊屬性，以此來避免沖突筒占，可取贪庙。代碼變成：

/* common.css */

body {
  background: #fff;
  color: #333;
  font-size: 16px;
}

.cm-nav { ... }

.cm-news { ... }

.cm-copy_right { ... }

私有模塊的代碼：

/* index.css */

.g-index {
  background: #fff;
  color: #333;
  font-size: 16px;
}

.m-nav { ... }

.m-news { ... }

.m-copy_right { ... }

這樣子處理之后，公共模塊和私有模塊之間的命名沖突就解決了翰苫，而且也不會(huì)出現(xiàn)“一個(gè)還什么都沒有頁面引用了common之后止邮，許多的類名就被占用了”的情況，因?yàn)閏ommon絕大部分內(nèi)容都是cm模塊奏窑，而頁面自己的css里只能擁有私有的m模塊导披。

新問題

假設(shè)我們已經(jīng)寫完了index頁面，接著寫about頁面埃唯，這時(shí)候我們發(fā)現(xiàn)撩匕，原本在index中的一個(gè)模塊m-news，我們將它歸為私有模塊墨叛，而現(xiàn)在在about中居然也需要用到這一個(gè)模塊止毕，于是乎，我們重新回到index頁面漠趁，把m-news模塊從index.css轉(zhuǎn)移到了common.css當(dāng)中扁凛，并改名為cm-news，然后回到index頁面闯传，把與m-news相關(guān)的內(nèi)容（html谨朝、js）都修改成cm-news。這還是在我們能夠意識(shí)到的情況下做的甥绿，如果頁面多了起來叠必，我們根本沒有印象哪個(gè)頁面是不是也有這樣一個(gè)模塊，要不要把它提升為公共模塊妹窖。一個(gè)月之后纬朝，這個(gè)項(xiàng)目一個(gè)星期前已經(jīng)搞定了，現(xiàn)在需要進(jìn)行后續(xù)的開發(fā)骄呼，加多一個(gè)contact頁面共苛，然后我們又發(fā)現(xiàn)判没，這頁面里用到了一個(gè)原本我們在about頁面里把它劃為私有模塊的m-loc，于是乎隅茎，我們又走了一遍提升公共模塊的流程

為什么會(huì)出現(xiàn)這樣的問題澄峰？根本原因在于，我們無法事先規(guī)劃好所有的模塊辟犀，無法在一開始就對(duì)一個(gè)模塊的屬性清晰地劃分俏竞。這個(gè)問題也基本算是無解。矛盾在于堂竟，我們對(duì)模塊進(jìn)行了私有和公有的屬性劃分魂毁，卻無法事先掌握所有的模塊屬性，只能走一步算一步出嘹，錯(cuò)了就回來再改改席楚。

解決這問題的辦法是，取消對(duì)模塊的屬性劃分税稼，所有模塊都默認(rèn)為公共模塊烦秩，可以隨時(shí)取用。但是這樣就倒退回了我們之前的那種情況郎仆，所有的模塊都是m-*只祠，且都扎堆在common里，導(dǎo)致common的體積過大扰肌，所以這個(gè)問題只能到這里為止了抛寝。

模塊的設(shè)計(jì)原則

如何界定一個(gè)模塊？或者說狡耻，怎么樣才能把一部分代碼劃分為一個(gè)模塊？劃分的依據(jù)是什么猴凹？

css模塊應(yīng)該遵循以下幾點(diǎn)要求：

1 . 只對(duì)外暴露一個(gè)類名

/**
 * 正確示范夷狰，所有模塊相關(guān)的代碼都掛在模塊的選擇器名下
 */
.m-nav { ... }
.m-nav .list { ... }
.m-nav .list .item { ... }

/**
 * 錯(cuò)誤示范，暴露了.m-nav和.list兩個(gè)類名郊霎，污染了空間
 */
.m-nav { ... }
.list { ... }
.list .item { ... }

2 . 不影響周圍布局：一般情況下沼头，盡量不要使用一個(gè)脫離文檔流的布局（既使用了float:left/right，position:absolute/fixed的布局）书劝，盡量不要使用外邊距（margin）进倍，為了使得模塊更加穩(wěn)定、具備更高的可塑性购对；

/**
 * 正確示范猾昆，在common中定義一個(gè)模塊，在頁面css中對(duì)模塊進(jìn)行定位和偏移
 */

/* common */
.u-logo {
  width: 100px;
  height: 100px;
}

.cm-news {
  width: 200px;
  height: 100px;
}

/* index */
.u-logo {
  position: absolute;
  left: 20px;
  top: 20px;
}

.cm-news {
  margin-top: 50px;
}

/**
 * 錯(cuò)誤示范骡苞，在common中定義一個(gè)模塊并固定它的位置
 */

/* common */
.u-logo {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 20px;
  top: 20px;
}

.cm-news {
  width: 200px;
  height: 100px;
  margin-top: 50px;
}

3 . 模塊盡量設(shè)計(jì)為方便復(fù)用的量級(jí)垂蜗，避免大而全楷扬，求精巧；

/**
 * 正確示范
 */
<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>index</title>
</head>
<body>
  <div class="g-index">
    <div class="g-bd">
      <!-- 正確的示范 -->
      <!-- 創(chuàng)建一個(gè)大的內(nèi)容塊article_box贴见，而不是一個(gè)大模塊 -->
      <div class="article_box">
        <div class="hd">
          最新文章
        </div>
        <div class="bd">
          <div class="list">
            <!-- 這里我們把每一個(gè)項(xiàng)作為可復(fù)用的私有模塊 -->
            <div class="m-list_item">
              <img class="cover" />
              <div class="info">
                <div class="title">
                  <a href="#">文章標(biāo)題</a>
                </div>
                <div class="desc">文章簡介</div>
              </div>
            </div>
          </div>
        </div>
        <div class="ft">
          <!-- 這里我們直接引入了一個(gè)公共分頁模塊 -->
          <div class="cm-page">
            <a href="#" class="pg">1</a>
            <a href="#" class="pg">2</a>
            <a href="#" class="pg">3</a>
            <a href="#" class="pg">4</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

/**
 * 錯(cuò)誤示范
 */
<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>index</title>
</head>
<body>
  <div class="g-index">
    <div class="g-bd">
      <!-- 錯(cuò)誤的示范 -->
      <!-- 創(chuàng)建一個(gè)龐大且不可復(fù)用的私有模塊m-article_box -->
      <div class="m-article_box">
        <div class="hd">
          最新文章
        </div>
        <div class="bd">
          <div class="list">
            <div class="item">
              <img class="cover" />
              <div class="info">
                <div class="title">
                  <a href="#">文章標(biāo)題</a>
                </div>
                <div class="desc">文章簡介</div>
              </div>
            </div>
          </div>
        </div>
        <div class="ft">
          <div class="page">
            <a href="#" class="pg">1</a>
            <a href="#" class="pg">2</a>
            <a href="#" class="pg">3</a>
            <a href="#" class="pg">4</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

模塊繼承

css的繼承也是很簡單的烘苹，一般來說是有這么幾種方式：

1 . 在css中并寫兩個(gè)類，如.cm-nav, .m-nav片部，我們知道镣衡，這相當(dāng)于讓兩個(gè)（組）類共享一套樣式，然后我們再單獨(dú)對(duì).m-nav進(jìn)行補(bǔ)充档悠，實(shí)現(xiàn)繼承和定制廊鸥；
2 . 在class屬性里并寫兩個(gè)類，如<img class="u-logo logo">站粟，這樣我們只需要在頁面css中單獨(dú)對(duì).logo類進(jìn)行補(bǔ)充黍图，就可以實(shí)現(xiàn)定制；
3 . 在頁面css中直接對(duì)類進(jìn)行引用
奴烙，然后補(bǔ)充樣式助被，實(shí)現(xiàn)定制，如.cm-nav { margin-bottom: 20px; }切诀；

第一種在我們這套模式里是不可取的揩环，因?yàn)槲覀兊墓材K都是放在common里，不可能每繼承一次就上去補(bǔ)一個(gè)類幅虑；
第二種可取丰滑，但是需要多一個(gè)近似的類名，不提倡倒庵；
第三種又簡單又靠譜褒墨。

/* common.css */

body {
  background: #fff;
  color: #333;
  font-size: 16px;
}

.cm-nav {
  width: 100%;
  height: 50px;
  color: #fff;
  background: #333;
}

我們在頁面css可以這樣用：

/* index.css */

.g-index {
  background: #fff;
  color: #333;
  font-size: 16px;
}

.cm-nav {
  width: 1000px;  /* 樣式覆蓋 */
  margin: auto;  /* 樣式增加 */
}

狀態(tài)

我們在上面講前綴的時(shí)候，提到過一個(gè)前綴z-擎宝，我們說它可以用來表示狀態(tài)郁妈。一個(gè)模塊是可以有狀態(tài) 的，當(dāng)然绍申，這里說的不是狀態(tài)好狀態(tài)差的意思（模塊還成精了～）噩咪，這里指的是有多種表現(xiàn)形式，我們舉例來說极阅，一個(gè)彈窗模塊m-dialog胃碾，它應(yīng)該至少具備兩種狀態(tài)：顯示和隱藏（關(guān)閉）。我們用關(guān)鍵字 active 來表示這兩種狀態(tài)筋搏，添加z-active類表示顯示仆百，不加表示隱藏。如下：

/* index.css */

.m-dialog {
    display: none;
}

.m-dialog.z-active {
    display: block;
}

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>index</title>
</head>
<body>
  <div class="g-index">
    <div class="g-bd">
      <div class="m-dialog">
        這是一個(gè)未激活的彈窗奔脐，你看不到儒旬！
      </div>
      <div class="m-dialog z-active">
        這是一個(gè)已激活的彈窗栏账，你看得到！
      </div>
    </div>
  </div>
</body>
</html>

彈窗一個(gè)比較有代表性的例子栈源，另一個(gè)典型的例子是按鈕挡爵，用過bootstrap的人都知道，按鈕btn只需要相對(duì)應(yīng)添加幾個(gè)狀態(tài)類甚垦，就可以有不同的配色方案茶鹃，應(yīng)付不同的場景需要，這其實(shí)就是我們的z-的含義艰亮。z-是很常用的闭翩，我們應(yīng)該把我們的模塊設(shè)計(jì)得盡量滿足多種可預(yù)見的需求，而不是每次都在頁面去定制和覆蓋基本樣式迄埃。

最后編輯于：2017.12.05 01:50:41

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末疗韵，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子侄非，更是在濱河造成了極大的恐慌蕉汪，老刑警劉巖，帶你破解...
沈念sama閱讀 221,820評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件逞怨，死亡現(xiàn)場離奇詭異者疤，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)叠赦，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,648評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門驹马，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人除秀，你說我怎么就攤上這事糯累。” “怎么了册踩？”我有些...
開封第一講書人閱讀 168,324評(píng)論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵泳姐，是天一觀的道長。經(jīng)常有香客問我棍好，道長仗岸，這世上最難降的妖魔是什么允耿？我笑而不...
開封第一講書人閱讀 59,714評(píng)論 1贊 297
?港島之戀（遺憾婚禮）
正文為了忘掉前任借笙，我火速辦了婚禮，結(jié)果婚禮上较锡，老公的妹妹穿的比我還像新娘业稼。我一直安慰自己，他們只是感情好蚂蕴，可當(dāng)我...
茶點(diǎn)故事閱讀 68,724評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布低散。她就那樣靜靜地躺著俯邓，像睡著了一般。火紅的嫁衣襯著肌膚如雪熔号。梳的紋絲不亂的頭發(fā)上稽鞭，一...
開封第一講書人閱讀 52,328評(píng)論 1贊 310
城市分裂傳說
那天，我揣著相機(jī)與錄音引镊，去河邊找鬼朦蕴。笑死，一個(gè)胖子當(dāng)著我的面吹牛弟头，可吹牛的內(nèi)容都是我干的吩抓。我是一名探鬼主播，決...
沈念sama閱讀 40,897評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼赴恨，長吁一口氣：“原來是場噩夢啊……” “哼疹娶！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起伦连，我...
開封第一講書人閱讀 39,804評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤雨饺，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后除师，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沛膳，經(jīng)...
沈念sama閱讀 46,345評(píng)論 1贊 318
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,431評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年汛聚，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了锹安。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,561評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡倚舀，死狀恐怖叹哭，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情痕貌，我是刑警寧澤风罩，帶...
沈念sama閱讀 36,238評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站舵稠，受9級(jí)特大地震影響超升，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜哺徊，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,928評(píng)論 3贊 334
男人毒藥：我在死后第九天來索命
文/蒙蒙一室琢、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧落追，春花似錦盈滴、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,417評(píng)論 0贊 24
一樁弒父案巢钓，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽病苗。三九已至，卻和暖如春症汹，著一層夾襖步出監(jiān)牢的瞬間硫朦，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,528評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工背镇，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留阵幸，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,983評(píng)論 3贊 376
代替公主和親
正文我出身青樓芽世，卻偏偏與公主長得像挚赊，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子济瓢，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,573評(píng)論 2贊 359