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