Social links profile component

What are you most proud of, and what would you do differently next time?

I'm most proud of catching and fixing multiple BEM mistakes during the review process. I identified that my block name social-links was wrong, it described the content rather than the component itself. Renaming everything to profile-card made the structure much cleaner and more meaningful.

Next time I'd define my block name and element structure before writing a single line of CSS, to avoid having to rename everything later.

What challenges did you encounter, and how did you overcome them?

I ran into three main issues:

1. Wrong block name - I named the block after what the component contains (social-links) instead of what it is (profile-card). I fixed this by renaming all classes to reflect the component identity.

2. Duplicate class on parent and child — I applied the same class to a wrapper <div> and the <img> inside it, causing a conflict. The fix was to remove the unnecessary wrapper and apply the class directly to the image.

3. Visual mismatches - My link styles were plain blue anchor tags, but the design called for full-width rounded buttons with white text. I also had the wrong colors for the location label and bio text. I fixed these by studying the design more carefully before writing CSS.

What specific areas of your project would you like help with?

I'd like feedback on two things:

1. BEM block naming — Is there a reliable rule of thumb for choosing a block name when a component contains multiple distinct sections? For example, should a card with a profile section and a links section be one block or two?

2. Links as buttons — I used <a> tags with display: block for the social links. Is this the right semantic approach, or should I be using <button> elements or adding role="button" explicitly?