Skip to content
Submitted almost 2 years ago

Newsletter sign-up form with success message using BEM CSS

bem
Leonard•1,025
@leoikeh99
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was my first time using bem css, wanted to start using this because I thought it made working with CSS cleaner and a little bit easier and it definitely was. Also tried to write better accessibility so please give me feedback on accessibility issues and also any feedback on CSS best practices.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    This is pretty good but there are some accessibility issues

    1. the error should not be in a label. It should be in a paragraph and have an aria-live attribute on it and a unique ID
    2. the error should not be display none by default. Aria-live elements should be present in the dom at all times so the browser knows to watch them for changes. Instead the error element should be present just with no content inside
    3. To programmatically link the error and input, use aria-desciribedby on the input pointing to the error element's ID
    4. clamped font sizes must not use viewport units for the middle font size. Instead you must use calc to transform those viewport units into rem. This is extremely important as at the moment this is ignoring users font size settings

    Other than that all this looks good previewing on mobile

    Marked as helpful
  • Karol Binkowski•1,620
    @GrzywN

    Great job!

    I would suggest querying all the elements first and then passing them as function parameters. Then you can use the same elements and it is not necessary to query them again. This is generally considered a good practice.

    It is also better to avoid complicated regular expressions, as they almost always do not work as intended. I would suggest using one of the popular npm libraries in this case.

    Keep coding and have a nice day!

  • Mandriva 19•330
    @mandriva19

    hello, the project is very well made. I like the fact that you are aware of accessibility features and used BEM in your CSS. I want to implement it in my future projects aswell. CSS is well written and name convention also in HTML looks nice. learned a lot from your code! thanks. keep up! <3

    one little detail tho: there is no error message popping up when user enters invalid email :P

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