Design comparison
Solution retrospective
this was an interesting little project. However my big problem is always how to correctly name my classes . i would appreciates to hear about what names you guys would have use.
Community feedback
- @mukwende2000Posted over 1 year ago
I would recomment you read about the BEM naming convetion, BEM stands for block element modifier, this is how you would utilize it, say you have a form, you would give it a class name like "form", this will be your block
And inside of the form you will have inputs likely, so you will give a text input a classname of "form__text-input", note there are two underscores, that is the convetion that bem uses.
If you have an email input, you will give it "form__email-input".
The inputs and any other direct children of the form are the elements. The idea is to have a block element which is the parent of the elements of similarity, you name the children relative to the parent by starting with the name of the block and two underscore followed by the name of the element.
Now if at all you had another form, but it is different slightly from the first, like maybe it has a different background colour, you would name is "form--red", the name of the block, two dashes and the modifier name, i can't get into details, so i will recommend you go do a research on this and learn.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord