feat(classname): add BEM wrapper functions

Author: wewoor

src/common/className.ts

@@ -13,3 +13,24 @@ export function prefixClaName(name: string, prefix: string = APP_PREFIX) {
 export function classNames(...names) {
     return names.filter((name) => !!name).join(' ');
 }
+
+/**
+ * Element names may consist of Latin letters, digits, dashes and underscores.
+ * CSS class is formed as block name plus two underscores plus element name: .block__elem
+ * @param block
+ * @param element
+ */
+export function getBEMElement(block: string, element: string) {
+    return `${block}__${element}`;
+}
+
+/**
+ * CSS class is formed as block’s or element’s name plus two dashes:
+ * .block--mod or .block__elem--mod and .block--color-black with .block--color-red.
+ * Spaces in complicated modifiers are replaced by dash.
+ * @param blockOrElement
+ * @param modifier
+ */
+export function getBEMModifier(blockOrElement: string, modifier: string) {
+    return `${blockOrElement}--${modifier}`;
+}