标记和样式
Salesforce 闪电设计系统 (SLDS) 组件库的积极开发，使 Salesforce 开发人员能够在所有与 Salesforce 相关的应用程序中创建统一的外观和体验，同时坚持CSS最佳实践和约定。为了实现这一目标，我们选择使用非常具体的命名技术，这些使我们能够保持我们的代码库平滑，具有较低的特异性，使我们以抗争挫折开始并以! important结束。虽然我们的命名基于 BEM方法，但我们有一些我们自己的补充说明。
BEM是一种众所周知的命名组件的方法--块、元素、修饰符。对于那些不熟悉或需要快速刷新认知的人，让我们简单看看 BEM是如何工作的。例如，我们将构建一个房屋组件。
块：块表示主组件名称。如果你建造一个房子的组件，类的名字将是.house。所有你认为属于所有房子的资产都将包括在base.house 类。
元素：元素表示组件的一部分，并由两个下划线分隔。房子的门将由类.house_door代表，一个窗户将是.house _ window。
请注意在较大的组件中查找较小的组件可能性，特别是如果它是一种模式，可能会在一个不相关的组件中重复。避免使用像.house _ stair _ step 这样的类；相反，任一使用.house _ stair-step (单个破折号在BEM中不表示任何内容，只需用于复合命名)。或者，如果组件的.stair部分可能在另一个组件内使用，则使.stair成为较大组件中的较小组件，并使用.stair _ step 作为其中的一个元素。
修饰符：是组件或元素的变体，用一个下划线分隔。该变体可以应用于整个组件，也可以应用于组件中的元素。由于适用于每栋房子的资产都放在主.house 类，所有的房子都以.house 类作为库。如果房子有变化 (也许是灰色的)，除了.house 类之外，还将.house _ gray类添加到组件中。如果房子有一个红色的门，需设置一个变量代表门元素本身-.house_door_pink。
Markup and Style
The Salesforce Lightning Design System (SLDS) component library is actively developed to enable Salesforce developers to create a uniform look and feel across all Salesforce-related applications while adhering to CSS best practices and conventions.
In order to accomplish this goal, we’ve chosen to use very specific naming techniques. These allow us to keep our code base flat, with low specificity, and keeps us from fighting specificity wars that start with frustration and end with !important. Though we base our naming on the BEM method, we have a few additions of our own outlined below.
BEM Naming
BEM is a well-known method of naming components — block, element, modifier. If you’re comfortable with BEM, move down to the “Where we diverge from BEM” section. For those unfamiliar or who need a quick refresh, let’s briefly look at how BEM works. As an example, we’ll build a house component.
Block
A block represents the main component name. If you were building a house component, the class name would be .house. All of the properties you want included for all houses would be included in the base .house class.
Element
An element represents a part of a component and is separated by two underscores. The door of the house would be represented by the class.house__door. A window would be .house__window.
Be careful to look for smaller component possibilities within a larger component. Especially if it’s a pattern that might be repeated in an unrelated component. Avoid using a class like .house__stair__step. Instead, either use .house__stair-step (a single dash does not indicate anything in BEM and can simply be used for compound naming). Or if the stair portion of the component might be used inside another component, make the .stair a smaller component within the larger component and use .stair__step as an element of it.
Modifier
A modifier is a component or element variation and is separated by a single underscore. The variation can apply to the overall component or it can be applied to an element within the component.
Since the properties that should apply to every house are placed on the main .house class, all houses receive the.house class as the base. If there is a variation of a house — perhaps it is gray — the .house_gray class would be added to the component in addition to the .house class.
If the house has a pink door, a variation can be placed on the door element itself — .house__door_pink.
