Design comparison
Solution retrospective
Any tips on writing cleaner and more maintainable code would be greatly appreciated.
Community feedback
- @geomydasPosted 5 months ago
Use a preprocessor such as SASS or a framework such as Tailwind if you want to make more maintanable CSS. I'm not saying preprocessors and frameworks are a must, they are just a matter of preference. You can do large projects with vanilla CSS.
If you prefer Vanilla CSS, see below
Also, you shouldn't always add classes to every html element so that you will be able to style it. You can learn about Combinators and Selectors here:.
Let's say you have this following HTML code
<div class="cta"> <h2> Lorem ipsum </h2> </div> <main class='other'> <h2> Lorem ipsum </h2> </main>
Most of the times, you usually put an id or class to the h2 to styles it, but you can use combinators for this and without adding ids or classes
.other h2 { /* Style goes here /* } .cta h2 { /* Style goes here /* }
0@denislavangelov09Posted 5 months ago@geomydas In my first challenge, I was told the opposite "try to use low specificity first in your css before increasing only if necessary. You can add classes on your different elements to target them directly with a specificity of 10. Try not to style html element directly other then resets or if you are sure its a global style you want to apply on the whole website. It will improve the readability and maintainability of your code. /** examples **/ [x] .card img <--- specificity of 11 [✓] .card__image <--- specificity of 10"
0@geomydasPosted 5 months ago@tedkataa Oh wow! Just learnt a new thing, I was supposed to be helping you but now you helped me, haha. I am wrong
1
Please log in to post a comment
Log in with GitHubJoin 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