@pikapikamart
Posted
Hey, great work you got there. The layout is good in desktop and mobile view.
Suggestions would be
- Font color. Changing them will be a great idea to make it more contrasted and pop out more in terms of UI.
- I see that you declare a
border-radius
in yourmain
tag. Well for now, you cannot see the result right because of the child overlapping it. If you want to see theborder-radius
, you add aoverflow: hidden
. This way, it will cut out the border of the child and the border radius will be seen in the container
Regarding your queries
- Yes, as I looked into it, it is fine. No extra usage of elements and used a proper element, good for that.
- For them BEM, well, I think you could improve this. Okay here's how BEM works. First, you declare a block element, like it is a parent container. That block element will be independent among other components, now the child of that block, which is denoted in __ double underscore, is dependent on that block. But keeping in mind that whenever you are using that element, you first might want to look for the layout. Check for similarities among components, so that you element will be extensible and reusable. For the modifier, denoted by -- double hyphen or single, is the customizer of your element. Say for example we want to make that element rounded with background-color of blue, then we want a modifier to hold that. (This is my previous comment from another person here)
Overall, you did good in here. But if you have any question, just drop it here okay^
@MojtabaMosavi
Posted
@pikamart Tanks for you great comment, regarding the usage of BEM I would really appreciate if you point out an exmple from the soulution and how it can improved (big fan of learning by example).
@pikapikamart
Posted
@MojtabaMosavi Sure, I can provide some.
-
First, well, just a convention, if you were to make a block element, it would be better to name it one word I guess. Like card or component and not card-component. Well just a shorthand, well for me.
-
If I were to do this. Your selector
card-component
will just be a regular flexbox for me. It will not be a block element. Instead there will be a class offlex
that I will in it. -
Okay here is how I will structure. Those three cards. Each of them will have a class of
card
that will be my block element. It will contain the, btw, I use scss :>
.card {
@extend flex;
flex-direction: column;
gap: maybe 1rem or to be specified;
padding: adjust for preference;
}
Now that is my block element, I declared that gap in there and padding because in the layout, there are no other sections that will be using my card
but if it is a bigger page. Then I make some extension for to be used.
- The h2 will just contain some class like
heading--main
. It will be adjusted like this
.heading {
<-- can omit this since heading tags is usually bold-->
font-weight: bold;
}
.heading--main {
@extend .heading;
color: to be specified;
font-size: 2rem;
line-height: 1.2;
}
By doing this, I can apply this selector to multiple components or headings with needing to have dependent block element. I could also make heading--sub
something like that, for heading that are lower in terms of font-size.
- Those
card
selectors that I made? I could extend them or not. But if not, to color those card. I will just make something like
card--orange {
background-color: orange;
}
card--dgreen {
background-color: dark green; <-- If there is a dark green -->
}
This way my typing won't be that long.
- For the learn more button. What I will do is that, I will create a separate extend only selector for it. Here is how it will go.
.btn {
border-radius: 1rem;
font-weight: bold;
padding: 0.5rem 1rem;
transition: background-color 0.3s ease,
color 0.3s ease;
}
btn--white {
@extend .btn;
background-color: white;
color: black;
}
This way, I could create also multiple buttons without them dependent on another block. Right
I could just
<a href="#" class="btn--white">Hello</a>
something like that.
I usually mix BEM and scss hahahaa I don't know if that is good but it helps me a lot
Well that is my example and that is only one solution, there could be another better way, but that is my way