Design comparison
Solution retrospective
I really don't know how to name ids and classes
Community feedback
- @correlucasPosted over 2 years ago
Hello Erwin, congratulations for you challenge solution!
Answering your question about classes names, there's not a right or wrong name for classes, you should create your class name as simple as possible but in a way that these classes describe what the class is doing to the element or what this element represent. If you see frameworks as bootstrap you can see class names that describes exactly what the classe does, for example the class "bg-light" and "rounded" that one displays a background-color with a light color and the other apply a border-radius rounded to elements.
The most common classes name you'll see:
1.Container (this class is generally used for structures that can contain more than one element and also keep this element under properties as margins/paddings)
2.Wrapper (usually is the class wrapper is something that wraps around a single object to provide more functionality)
3.Hero (usually its the section that display the product photo and the main feature, you can see also hero-photo / hero-info)
There's many other names, but isn't a general rule, is only a convention that developers use to work in teams. If you're working alone you can focus on writing a css with the class names that are easy to remember what they do, this is the most important thing.
Probably I wasn't clear enoght so you can see also this video that explains better: https://www.youtube.com/watch?v=idN8winwZ78
You can check this article that explain how to name classes and a little bit of theory: https://medium.com/adalab/what-name-should-i-give-to-my-css-classes-3705dfca0e39
I hope it helps you!
Marked as helpful1@lanszeszPosted over 2 years ago@correlucas Thank you for your helpful feedback! I never heard about the BEM method, but I think I will try it in the nexr challange.
1@correlucasPosted over 2 years ago@lanszesz BEM is really useful if you work with teams because you've a standard for class names and so everyone can read you code an understand really easy what is happening or what means the class. Keep coding, have a good day.
1 - @prantiknoorPosted over 2 years ago
Erwin, I want to give you another tip. 💡
After submitting a solution you can look at others' codes & try to understand how they name classes & ids & compare them with your naming. By doing this you will have a good skill in naming classes & ids. 🙂
1
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