@irthifa
Posted
Hello there, Nice effort on this challenge!
I tried viewing your code to give you specific feedback but unfortunately, the link doesn't work. Hence, I decided to drop some general styling tips.
-
Having all of the common styling first in the stylesheet is a good idea. This means all the styles which will generally apply unless you do something special with that element. You will typically have default rules set up for:
body
p
h1, h2, h3, h4, h5
ul, ol
table
andlinks
-
We could define a few utility classes. If you have a few styling choices you know you will want to apply to lots of different elements, they can be put in this section. For example, a class that removes the default list style for lists we're going to display.
/* || UTILITIES */
.nobullets {
list-style: none;
margin: 0;
padding: 0;
}
/* … */
- Include CSS for specific things, broken down by the context, page, or even component in which they are used. Example :
/* || STORE PAGES */
.product-listing {
/* … */
}
.product-box {
/* … */
}
By ordering things in this way, we at least have an idea of which part of the stylesheet we are looking at.
- Avoid overly-specific selectors If you create very specific selectors, you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. Example :
article.main p.box {
border: 1px solid #ccc;
}
If you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. Instead if you use below,
.box {
border: 1px solid #ccc;
}
This will apply your rule to any element that has the class box. But, remember there will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice.
You can read more about this here
I hope you find this useful!
Happy coding!
Marked as helpful