如何编写复用性、可读性和可维护性的代码

- 平时我们在写HTML、CSS时会为类的命名耗费脑汁，本文总结了一下平时编码的心得

CSS结构化组织思想

• 目的是讲用户界面划分为独立的块，即使使用复杂的UI，这也使界面开发变得简单快捷，并且允许重复使用现有的代码，而无需复制和粘贴。
• CSS（块+元素+修饰符）

块

所谓的“块”其实就是该DOM元素共有的最基本的特性，在其命名上我们可以采取按照其目的来取名（btn或者search-form），而不是按状态（red或者big）

<div class="error"></div>

<div class="red-text"></div>

• 该块不应影响其环境，这意味着您不应设置块的外部几何（边距）或定位。

也就是说这样可以保证其复用性比较高

元素

块的复合部分，不能与其分开使用。同理其在命名上面依赖于块的衍生（item或者text）
你可以按类似这样的取名方式（块名称__元素名称）

<form class="search-form">

      <input class="search-form__input">      <button class="search-form__button">Search</button>

</form>

修饰符

定义块或元素的外观，状态或行为的实体。
修饰符具有描述其外观（“多大？”或者“哪个主题？”等等- size_s或theme_islands）其状态（“它与其他人有什么不同？” - disabled，focused等），其行为（“它是否有行为？“或”它如何响应用户？“ - 例如directions_left-top）。
修饰符名称通过单个下划线（_）与块或元素名称分隔开。

<form class="search-form search-form_focused">

    <input class="search-form__input">    <button class="search-form__button search-form__button_disabled">Search</button>

</form>

你可以在修饰符中添加键值来达到具体描述，从而达到可读，以便在后期维护时易于更改 (修饰符名称_键值)

<button class="search-form__button search-form__button_size_s search-form__button_size_m">

有了上述思考方式后我们可以将其应用到我们的项目文件结构中去

单个块对应于单个目录。
块和目录具有相同的名称。例如，该header块在header/目录中，该menu块在该menu/目录中。
块的实现分为单独的技术文件。例如，header.css和header.js。
块目录是其元素和修饰符的子目录的根目录。
元素目录的名称以双下划线（__）开头。例如，header/__logo/和menu/__item/。
修饰符名称的名称以单个下划线（_）开头。例如，header/_fixed/和menu/_theme_islands/。
元素和修饰符的实现分为单独的技术文件。例如，header__input.js和header_theme_islands.css。

CSS结构化参考 : BEM OOCSS SMACSS

本仅仅是提供思路，欢迎拍砖