Skip to content
Submitted over 3 years ago

Huddle Landing Page - Mobile First, Flex, SCSS, BEM.

Shivam•520
@shivjoshi1996
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone,

This was my first time using Sass & BEM, and I just wanted to try this challenge to practice naming and Sass code organisation.

I am open to any and all feedback, but I have a few specific questions around Sass & BEM:

  1. As you will see, my code only contains one "base.scss" file. I originally was going to have different files (e.g. one for layout and one for components) but I couldn't conceptually grasp how I should be splitting the code up in both the HTML and the CSS. I know the aim is to keep the code DRY (which I have obviously failed at) but how should I be splitting things up? Should I be adding any "container" related CSS in a "layout.scss" file? And any component based CSS (e.g. for the button) in the components file? I guess it will make more sense when I work on a bigger project, but any feedback would be great.

  2. While using BEM, I was mostly focused on the naming convention - I think I still need to grasp the concept of "block / element / modifier". I also found it tricky to have a clean naming convention while also splitting the Sass code, and it was one of the reasons I kept to one "base.scss" file. Any feedback on how I've handled BEM, and what I can do to improve this project further, would be awesome.

  3. Utility classes - I'm sure that I should add utility classes (e.g. to center text) - but in order to do this, do I simply make a "utilities.scss" file and add .text-center { text-align: center }, and then add it to every class in the HTML that needs it? I'm going to do some more reading around this, but any feedback or help would be great!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hi there, once again Shivam! 👋

    Good job on another challenge! 👍 I think overall, your solution looks good and responds well! 😀

    This is kind of a smaller project, so I think you're right in that you don't have to worry about splitting your Sass files a whole bunch. For a project like this, I would usually have a few partial files like layout.scss (for larger components and the overall layout of the page), base.scss (for a CSS reset and maybe CSS variables), and component.scss (for smaller components like buttons and links), and perhaps utilities.scss... that sort of thing (but that's just me, IDK what others do). For larger projects, you could look into using a popular file structure pattern like the 7-1 pattern.

    BEM is pretty nice and I like how it works well with Sass's nesting feature. I think you used it well in this project! 👍

    I actually don't use Sass so much (so I'm no expert), but you could look into creating mixins for commonly used styles and then drop those into your styles elsewhere so that you don't have to add many utility classes to each element on your page (if you'd like to work that way). 🙂

    Well, keep coding (and happy coding, too)! 😁

    3
    Shivam•520
    @shivjoshi1996Posted over 3 years ago

    @ApplePieGiraffe Thanks for the feedback! Appreciate it! :) I'll take a closer look at mixins and see if I can use it for my next project.

    Happy coding to you too :)

    0
  • Grace•31,270
    @grace-snowPosted over 3 years ago

    Hi

    I really like this solution, it's great!

    I wouldn't bother splitting into multiple scss files for a tiny project like this, so that's fine. And all naming looks great, except footer__links which should probably be singular.

    A few tiny changes I'd suggest, but these are by no means essential:

    • remove the word icon from your social links aria labels. It's about where the link is taking you, not about the fact there's an icon in there. So just the name of the social site is fine :)
    • similarly, lose Huddle logo - Huddle is the name of the site and that's enough
    • The register button is much more likely to be a navigational link, not a button (unless it triggered a form in a modal maybe....)
    • Try to make focus states a bit more obvious and more consistent. They are really hard to see at the moment, especially on the social links
    • It's really unusual to use padding top on elements like paragraphs and headings, more usual to use margins. The reason is because margins will collapse on each other and not stack/double up. So if you put padding top on an element, and another dev made a component with padding bottom that was placed above, that would create doube the space between those elements. Whereas if they used the more conventional margin, whichever had the bigger margin would win and that is the whole gap.

    That's all from me. Good job on this!

    2
    Shivam•520
    @shivjoshi1996Posted over 3 years ago

    @grace-snow Thank you so much!

    This is really valuable feedback and I appreciate you taking the time to be so thorough. Especially the point around margin-top & padding, I've always wondered which one to use, and you explained it so well.

    Thanks again!

    0

Please log in to post a comment

Log in with GitHub

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