pricing-component-with-toggle-master

Hey, great work on this one. Layout both desktop and mobile is good.

Regarding your queries:

1. Well I haven't really used mobile first, but I hope there is someone to see this and can help you with that:>

2. As we are BEM lovers, using BEM is to create reusable and extensible components right. In your case, you declare overly specified selector. For example pricing, just by the name and usage, we cannot really reuse that in other sections because it is made to be specific, as a block. In BEM, we create a block, B, which will be the somewhat parent right, then create elements, E, denoted by __. That element, is somewhat what we reuse and extend. Lastly the modifiers, M, denoted by _ which states what is the element, what is the state.

3. 1. In your structure, there are points where it is not BEM, but there some which is. Like the btn and that is good because we know that there will be things to be reused in buttons. Those card as well could be good, since as we can see. There are multiple cards. But for the toggle and pricing, I think not. You can create different selectors on those, provided it is general, hence block, which is not limited to a single element.(Take note, I am not an expert in BEM, still studying, and grasping it) .

4. Hmm, for me, not entirely, but if I were to, I will just create some .scss file that contains some mixins or extensions and variables, but not the component itself. I prefer doing this instead of creating diffent module for different parts of the website. Unless it is big enough that navigating in one file is hard.

5. For the markup, some yes and some are not. For example those toggles. As you can see, you can select only one right, so radio buttons is really ideal on that. Having two radio buttons with the same name. By doing so, you created some accessibility feature. But as I can see, you are using checkbox, which is my first approach on this but later refactored it.

4.1. Your card headings, the basic is a heading right, which is good and it will be better if you made the prices headings as well. So when a screen reader reads it, it will read the heading "basics" followed by the price which is really great for them. You can use screen reader in your mobile phone and test the solutions that you made.

1. If I were to use only css and html on this, I will create two html elements for the pricing. Example on the basics, I will create two html element for the pricing. One for monthly and one for annual.

5.1. But how can we target that right? What I will do is that, I will put my radio buttons at a higher level or at the same level of the container of the cards. This way, if I can toggle my radio buttons usings labels as a toggle UI. I can just make use of

    .sample-radio-buttons:checked ~ .card .pricing-annual {display: block}
    .sample-radio-buttons:checked ~ .card .pricing-monthly{display: none}

Something like that.

If you need some guide on how to create it using two radio buttons here is my solution on this one. It is inspired a lot of Grace Snow's solution on this one. Check it, it is really great and awesome!!

Overall, great job ^