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