Open magicznyleszek opened 2 years ago
We should update our makeBem function (from js/bem.ts`) to something like this:
makeBem
makeBem('KoboRange', 'div'); makeBem('KoboRange__number', 'span');
We could also allow for passing an array to makeBem:
makeBem([ ['KoboRange', 'div'], ['KoboRange__number', 'span'], ]);
This ensures that all places use the same string (easier to search):
// bem component definition makeBem('KoboRange', 'div'); makeBem('KoboRange__number', 'span');
// bem component TSX usage <bem.KoboRange> <bem.KoboRange__number> … </bem.KoboRange__number> </bem.KoboRange>
// bem component styles .KoboRange {} .KoboRange__number {}
For existing code, where we don't want to update the class names, we could introduce third parameter (legacy class name):
makeBem('KoboRange', 'div', 'kobo-range'); makeBem('KoboRange__number', 'span', 'kobo-range__number');
NOTE: we might decide that we would prefer to follow styled components idea, if so then we don't need this :)
Description
We should update our
makeBem
function (from js/bem.ts`) to something like this:Additional flexibility
We could also allow for passing an array to
makeBem
:Reasoning
This ensures that all places use the same string (easier to search):
Legacy code
For existing code, where we don't want to update the class names, we could introduce third parameter (legacy class name):