命名空间

There are only two hard things in Computer Science: cache invalidation and naming things.
– Phil Karlton

计算机科学的两件难事:缓存失效和命名。

命名是一件复杂,有挑战的事,尤其是还需要使用英文。 在名称尽量短的情况下,还需要清晰、准确的指明当前内容的功用。 清晰明确在多数时间又是冲突的, 但是为了实际应用,使其成为了一个俗成的约定,因而也出现了各种命名的流派。

团队之间设定规则,并遵循规则命名、编码,以提升整体工作效率,尽量避免理解偏差。 终极目标是以最简洁的命名让更多的人通过命名可以对对应的内容有准确的预期。语义化的、和通用性的简写方式是其中重要的原则。

以下分享一些规范命名的样本,和流行的命名规则:

文件夹(项目)

主要用于个人文件,项目共享文件夹管理。 例如团队使用的seafile 内的文件管理。

参照 : File naming convertion

命名示例:

根据项目的情况和团队情况灵活设计,保证文件夹的语义化、可读性。

a designer's way of keeping files organized

a designer's way of keeping files organized2

流程、交互&设计交付

主要用于团队内部的流程、交互 & 设计交付使用,用于提升使用体验,减少不必要的沟通以及由此带来的额外负面影响。

可以绘制如下图的架构图,便于团队沟通。 简单团队的交付文件命名规范见 Zeplin命名管理

sketch art board naming

文件内(图层、css等)

主要用于设计师的设计源文件,保持良好的命名、分组习惯,提升设计效率和质量。 使文件可维护,便于团队协作的可操作性。

设计、前端不分家,良好的协作习惯能大大提高整体工作效率,减少不必要的沟通和错误,设计命名通常很少被提及,但在前端领域却有这深入的研究,在前端设计中, BEM 命名方式可圈可点,其设计思想也很有参考价值,至今仍被众多大公司和优秀的团队改编、应用。 同样也适用于设计领域。

BEM

BEM官网

使用 BEM 命名规范,理论上讲,每行 css 代码都只有一个选择器。

BEM代表 “块(block),元素(element),修饰符(modifier)”,我们常用这三个实体开发组件。

独立的实体,它本身是有意义的。 例:headercontainermenucheckboxinput

  • 元素

块的一部分,没有独立的含义,并且在语义上与其块相关联。 例:menu itemlist itemcheckbox captionheader title

  • 修饰符

块或元素上的标志。用它们来改变外观或行为。 例:disabledhighlightedcheckedfixedsize bigcolor yellow

在选择器中,由以下三种符号来表示扩展的关系:

- 中划线 :仅作为连字符使用,表示某个或者某个子元素的多单词之间的连接记号。
__ 双下划线:双下划线用来连接块的子元素
_ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态

BEM示例:

type-block__element_modifier

命名解析:

命名实例:

bem示例

ABEM

结合Atomic design 原子设计理论 和BEM命名方法的命名方式。

2013 年前端工程师 Brad Forst 将此理论运用在界面设计中,形成一套设计系统,包含 5 个层面:原子、分子、组织、模板、页面。

  • 原子
    为网页构成的基本元素。例如标签、输入,或是一个按钮,也可以为抽象的概念,例如字体、色调等。
  • 分子
    由原子构成的简单UI组件。例如,一个表单标签,搜索框和按钮共同打造了一个搜索表单分子。
  • 组织
    由原子及分子组成的相对复杂的UI构成物 。
  • 模板
    将以上元素进行排版,显示设计的底层内容结构。
  • 页面
    将实际内容(图片、文章等)套件在特定模板,页面是模板的具体实例。

atomic 理论框架

atomic

原子设计结构图

atomic design 的 [a,m,o]

amo

原子设计前缀 + BEM

原子设计前缀 + 驼峰式BEM 推荐设计师使用

BEM 其他前缀命名参考

实际应用当中不同的项目、团队和实际情况不太,也可以灵活拓展BEM命名方式,比如以下两种命名前缀,可供参考:

Type Prefix Examples Description
Component c- c-card c-checklist Form the backbone of an application and contain all of the cosmetics for a standalone component.
Layout module l- l-grid l-container These modules have no cosmetics and are purely used to position c- components and structure an application’s layout.
Helpers h- h-show h-hide These utility classes have a single function, often using !important to boost their specificity. (Commonly used for positioning or visibility.)
States is- has- is-visible has-loaded Indicate different states that a c- component can have. More detail on this concept can be found inside problem 6 below, but
type prefix Description
Object o- Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.
Component c- Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.
utility u- Signify that this class is a Utility class. It has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI. You will probably recognise this namespace from libraries and methodologies like SUIT.
theme t- Signify that a class is responsible for adding a Theme to a view. It lets us know that UI Components’ current cosmetic appearance may be due to the presence of a theme.
states is-, has- Signify that the piece of UI in question is currently styled a certain way because of a state or condition. This stateful namespace is gorgeous, and comes from SMACSS. It tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.
hack _ Signify that this class is the worst of the worst—a hack! Sometimes, although incredibly rarely, we need to add a class in our markup in order to force something to work. If we do this, we need to let others know that this class is less than ideal, and hopefully temporary (i.e. do not bind onto this).
javascript js- Signify that this piece of the DOM has some behaviour acting upon it, and that JavaScript binds onto it to provide that behaviour. If you’re not a developer working with JavaScript, leave these well alone.
QA qa- Signify that a QA or Test Engineering team is running an automated UI test which needs to find or bind onto these parts of the DOM. Like the JavaScript namespace, this basically just reserves hooks in the DOM for non-CSS purposes.

命名工具

命名虽负责,可以合理利用工具提升设计效率,减轻工作量。

Sketch 插件

  • sortme 根据命名排序的小工具,轻量、必备。
  • renameit 命名神器,必备。
  • replace2 查找替换图层内的内容。

详见 sketch plugin

翻译工具

  • 变量命名神器 支持直接搜索中文,当你查中文的时候,Codelf 会直接查好单词和单词的近义词给你,然后再搜索Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Project上的开源项目的源码匹配出与这些词汇相关的变量名和函数名。
  • iTranslate 使用 iTranslate for Mac,超过 80 种语言尽在您指尖。它是一款状态栏 app,您只需点按鼠标或敲击键盘,它就可帮您解决一切翻译问题。
  • 划词翻译-chrome插件 让浏览任意语言的网站变得无比轻松的浏览器扩展程序。

语义化版本

※ 使用 Semantic Versioning 2.0.0 语义化版本规范。

最后更新: a month ago