Social links profile main

Community feedback

• 

  ricardoychino•190

  @ricardoychino

  Posted 10 months ago

  Hey, great solution!

  As for your question, in my experience and it is kind of a consensus as far as I know that usually it is a good idea to use classes for styling. Classes makes the selection more specific, and also you can get a general idea of what the purpose of the rule you wrote. Think this way:

  .profile-avatar {  /* "Oh okay, this is CSS for profile avatar" */
    ...
  }
  img {    /* "What, which image?" (Imagine that in a real project you WILL have more than one eventually) */
  }
  

  In your solution, for example, there are some element selectors, but it is not that abstract, since they are nested in more specific selectors. So in my humble opinion you just did great.

  The only thing that I would change is the rule for *. Separate them like this:

  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "Inter", sans-serif;
  }
  /* This one depends on the project: */
  ul {
    list-style-type: none;
  }
  

  The * will apply the properties on every single element unnecessarily. The box-sizing is a good idea to apply, but the others like font properties will be inherited anyway; and if you decide to use a <small> for example, the font-size: 14px; will be applied to it, which is not a good idea. About the box model properties, I actually am not sure if there's any problem applying the reset on *, but usually they are already 0s, so if you want to reset them, reset only where it is needed.

  Anyway, just my thoughts. Good job and keep it up

  12