Design comparison
Solution retrospective
Hello 👋,
I am submitting my third challenge. Still from the newbie category on the one hand (as I try to polish the core principles of TailwindCSS), but it was a lot of fun on the other one.
Here is a bit of the breakdown. (More detailed explanation is available in the RespositoryURL).
What did you find difficult while building the project?
Initially, the most challenging part was managing specific position styles for the background images. It's not an issue in vanilla CSS; however, TailwindCSS applies many contains that didn't work by default for my requirements.
I could override these default utility classes for image background positions; however, I felt it would be overkill. Fortunately, I learned about a specific construct allowing it to be more precise whilst keeping the default constraints in place. Things like:
bg-[POSITION1_VALUE1_UNIT1_POSITION2_VALUE2_UNIT2]
e.g
bg-[right_-15rem_top_-14rem]
And learning this helped me to complete this project.
Which areas of your code are you unsure of?
Using Tailwind allows me to make the styles more compact. However, FrontendMentor designs always have a lot of tweaks in the original template.
It makes sense to update the configuration and override some values, but it could be counterproductive in most cases.
Therefore in quite a few places, I am using arbitrary values, like:
lg:w-[21rem]
The problem is that it becomes pretty repetitive after a while, and I feel it could be a problem if I decide to update these values.
Do you have any questions about best practices?
Given the repetitive arbitrary values, I will use more CSS variables for the repeating values, combining them with Tailwind new/altered/overridden utility values in tailwind.config.js.
I had worked with CSS variables before, but I had never done it in Tailwind. Is there any best practise related to this?
Community feedback
- @ryan17stehlePosted over 1 year ago
I'm certainly no expert in Tailwind CSS, but I don't think it's considered a best practice to use the @apply keyword the way you've chosen to. Even their own documentation says to use @apply sparingly. You can read about it here: https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
Marked as helpful0@radektomasekPosted over 1 year ago@ryan17stehle Hi Ryan,
thank you very much. It's very beneficial you pointed that in my direction, and I will dig into this more.
I still experiment with everything to find the most balanced approach (As an experienced dev, I have been comfortable with CSS and some of the best practices, but not with Tailwind ones).
If you look into my newer submission, I took this approach even further and utilized CSS variables.
The reason why I considered as a promising approach is that I could abstract some of the common, repeating elements (h1, p, etc.) into the wrapped units—and then add a few extra classes with clearly defined tailwind utilities.
In my case, I like that approach because, as a frontend dev, I can see a lot of benefits of this approach, too (e.g. some automated tooling could pick up class names more quickly).
But I appreciate your feedback and will dig into this more to see what improvements I can make.
Radek
0
Please log in to post a comment
Log in with GitHub
Join 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