layui 提倡返璞歸真，遵循于原生態(tài)的元素書(shū)寫(xiě)規則，所以通常而言，你仍然是在寫(xiě)基本的 HTML 和 CSS 代碼，不同的是，在 HTML 結構上及 CSS 定義上需要小小遵循一定的規范。
class命名前綴：layui，連接符：-，如：class="layui-form"
命名格式一般分為兩種：一：layui-模塊名-狀態(tài)或類(lèi)型，二：layui-狀態(tài)或類(lèi)型。因為有些類(lèi)并非是某個(gè)模塊所特有，他們通常會(huì )是一些公共類(lèi)。如：一（定義按鈕的原始風(fēng)格）：class="layui-btn layui-btn-primary"、二（定義內聯(lián)塊狀元素）：class="layui-inline"
大致記住這些簡(jiǎn)單的規則，會(huì )讓你在填充HTML的時(shí)候顯得更加得心應手。另外，如果你是開(kāi)發(fā)Layui拓展（模塊），你最好也要遵循于類(lèi)似的規則，并且請勿占用Layui已經(jīng)命名好的類(lèi)，假設你是在幫Layui開(kāi)發(fā)一個(gè)markdown編輯器，你的css書(shū)寫(xiě)規則應該如下：
.layui-markdown{border: 1px solid #e2e2e2;}
.layui-markdown-tools{}
.layui-markdown-text{}
Layui在解析HTML元素時(shí)，必須充分確保其結構是被支持的。以Tab選項卡為例：
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">標題一</li>
<li>標題二</li>
<li>標題三</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">內容1</div>
<div class="layui-tab-item">內容2</div>
<div class="layui-tab-item">內容3</div>
</div>
</div>
你如果改變了結構，極有可能會(huì )導致Tab功能失效。所以在嵌套HTML的時(shí)候，你應該細讀各個(gè)元素模塊的相關(guān)文檔（如果你不是拿來(lái)主義）
很多時(shí)候，元素的基本交互行為，都是由模塊自動(dòng)開(kāi)啟。但不同的區域可能需要觸發(fā)不同的動(dòng)作，這就需要你設定我們所支持的自定義屬性來(lái)作為區分。如下面的 lay-submit、lay-filter即為公共屬性（即以 lay- 作為前綴的自定義屬性）：
<button class="layui-btn" lay-submit lay-filter="login">登入</button>
目前我們的公共屬性如下所示（即普遍運用于所有元素上的屬性）
| 屬性 | 描述 |
|---|---|
| lay-skin=" " | 定義相同元素的不同風(fēng)格，如checkbox的開(kāi)關(guān)風(fēng)格 |
| lay-filter=" " | 事件過(guò)濾器。你可能會(huì )在很多地方看到他，他一般是用于監聽(tīng)特定的自定義事件。你可以把它看作是一個(gè)ID選擇器 |
| lay-submit | 定義一個(gè)觸發(fā)表單提交的button，不用填寫(xiě)值 |
額，好像有點(diǎn)少的樣子（反正你也基本不會(huì )看文檔。。(づ╥﹏╥)づ）。其它的自定義屬性基本都在各自模塊的文檔中有所介紹。
其實(shí)很多時(shí)候并不想陳列條條框框（除了一些特定需要的），所以你會(huì )發(fā)現本篇的篇幅較短。（哈哈哈哈哈，其實(shí)是寫(xiě)文檔寫(xiě)得想吐了）
layui - 在每一個(gè)細節中，用心與你溝通