Frontend Mentor - Social Links Profile

Solution retrospective
-
Improving my naming conventions for my HTML Classes using BEM
-
Organized in writing my css properties by doing it in alphabetical order, I'm open for suggestion on how I can improve on this part.
The challenge I encountered is naming my HTML element classes. This may sound something trivial, but I want to have a standard or guidelines on how I name my classes. By using the BEM (Block Element Modifier) as my basis for my class names, I finally have a standard on how I name my HTML elements.
What specific areas of your project would you like help with?I wish to improve in how to organize my CSS file. How to sort my css properties and etc.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mustafasen97
Your design is pretty good. Your code structure looks good too. However, I'd like to give you a few tips on CSS.
Use a consistent order for CSS properties
A common and popular convention is:
- Positioning (position, top, right, bottom, left, z-index)
- Display & Flex/Grid (display, flex properties, grid properties)
- Box Model (width, height, padding, margin, border, box-sizing)
- Typography (font-size, font-weight, color, text-align, line-height)
- Background & Decoration (background, border-radius, box-shadow, etc.)
- Other (cursor, transition, animation, etc.)
Example (reordered):
.profile-card { container-type: inline-size; display: grid; justify-self: center; gap: var(--spacing-md); width: clamp(15rem, 100%, 19rem); padding: var(--spacing-lg); border-radius: 1rem; background-color: var(--grey-800); }
Group similar parts together
Separate your base / reset, variables, layout, components, and utilities:
/**** Base styles ****/ * { ... } html, body { ... } body, a { ... } /**** Variables ****/ :root { ... } /**** Layout ****/ main { ... } /**** Components ****/ .profile-card { ... } .profile-card__header { ... } .profile-card__image { ... } .profile-card__user-details { ... } .profile-card__social-media { ... } /**** Utilities or helpers ****/ /* if you have */
Add comments
Clear section comments help quickly scan large CSS files.
/**** PROFILE CARD HEADER ****/ .profile-card__header { ... } /**** SOCIAL MEDIA LIST ****/ .social-media__list { ... }
Keep nesting shallow
Nesting too deep (like .profile-card .profile-card__header .profile-card__user-details) can make CSS harder to maintain. One or two levels is usually enough.
Use shorthand where practical
For example:
padding: var(--spacing-lg); /* instead of padding-block, padding-inline separately */ border-radius: 0.5rem; /* instead of writing all corners separately */
In summary:
-
Pick and stick to a property order (position → layout → box → typography → visuals → other)
-
Group by component
-
Use comments for sections
-
Keep selectors flat & short
-
Use tools to auto-format
I hope these help you. Keep designing and improving yourself. Good luck with your future designs.
Marked as helpful
Join 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