Working CSS Classes

The @archibald/client package offers a set of utility functions to work with CSS class names.

classNamesHelper

This function takes array of classes and returns a concatenated string.

import { classNamesHelper } from '@archibald/client';

const cssClassNames = classNamesHelper(PARAMENTERS);

Parameters

Name	Type	Description
classNames	(string | boolean | number | null | undefined)[]	A list with class names that should be concatenated.

Example

import { classNamesHelper } from '@archibald/client';

const cssClassNames = classNamesHelper(['main', 'secondary']);

// Result: main secondary

createBEMSelector

This function creates a BEM selector.

import { createBEMSelector } from '@archibald/client';

const cssClassNames = createBEMSelector(PARAMENTERS);

Parameters

Name	Type	Description	Default
base	string	The name of the class.
bemArguments	BemArgumentList	A list with modifiers.
includeBaseClass	boolean	Indicates if the class name should be included in the return.	false

Example

import { createBEMSelector } from '@archibald/client';

const cssClassNames = createBEMSelector('main', { element: ['big', 'small'], modifier: ['red', 'blue'] }, true);

// Result: main main__big main__small main--red main--blue