Hello Kazi. I hope you are doing great.
Seen the files in the repository and I have some tips for you:
Regarding your CSS code, I would advise to break down the project in your head or on paper before actually diving into the project itself. By doing this, the objective is to see which <div> or other elements have the same children inside.
For example, in your case, you have a notification which always contains an <img> and 2 <p>, meaning that the styling of one notification will be the same for the other ones.
Let's see how can we refactor your code. There are two ways to do this:
Your old code:
.not01{
margin-bottom: 10px;
background-color: hsl(210, 60%, 98%);
border-radius: 10px;
padding: 10px;
}
.not02{
margin-top: 10px;
background-color: hsl(210, 60%, 98%);
border-radius: 10px;
padding: 10px;
}
.not03{
margin-bottom: 10px;
background-color: hsl(210, 60%, 98%);
border-radius: 10px;
padding: 10px;
}
Method 1
The first way would to group all of the different classes:
.not01, .not02, .not03, .not04 {
margin-bottom: 10px;
background-color: hsl(210, 60%, 98%);
border-radius: 10px;
padding: 10px;
}
Why is this method not efficient? Imagine you had a real application where there would be THOUSANDS of notifications. You would have to manually add each one (.not01, ... , .not847, .not848, etc)
Another thing is that your application would not be so dynamic, because the classes would be hard-coded into every element, one by one. Which would lead you to show a limited number of notifications to the user (no one would want to write up to .not500 😆).
The second way would be to create one class for all the <div>
elements, which would be the correct method:
Method 2
.notification {
margin-bottom: 10px;
background-color: hsl(210, 60%, 98%);
border-radius: 10px;
padding: 10px;
}
This way every child's style would follow as:
.notification img{
float: left;
margin-top: -8px;
margin-right: 10px;
}
.notification p a:first-child{
color: black;
text-decoration: none;
font-weight: 800;
cursor: pointer;
}
.notification p a:last-child{
color: hsla(224, 21%, 14%, 0.714);
text-decoration: none;
font-weight: 800;
cursor: pointer;
}
And the best part? You would only write once for every notification :)
If you have any questions, I will do my best to answer them.
Happy coding!