Design comparison
Solution retrospective
Even though I do use ChatGPT, Stack Overflow, documentations, listed below are the things I still struggle the most with. Mostly, because there are just so many options and the answer doesn't always seem to be clear enough.
What is the best way to write your CSS ? The nested syntax I used or are there better alternatives. Of course, I know it probably depends, but how did I do when you take a look at my CSS, what should I improve ?
What about the responsive design ? You can use vmin/vmax, rem/em, %, vw/vh. How do you choose when to use which and why ? I always burn a lot of time at that.
I mixed using CSS Grid and Flebox, did I use it correctly or is it an overkill ?
Thank you very much!
Community feedback
- @FluffyKasPosted about 1 year ago
Hey,
First off, your solution looks great. And it's nice that you made a detailed README, as well. To answer your questions - or more like, I guess to just add my own take on it:
You will not get a clear answer from ChatGPT, documentation, etc purely because there isn't one best way to write CSS, or code in general. Everyone has their own preferences. In professional settings, there will be company/team guidelines you will need to follow. If you work alone, you can set your own rules. You should ask yourself, how readable your code is. Would you understand it even if you came back to it in a few months?
But to be a bit more useful, I can give you my own opinion on this.
CSS vs SCSS
For small projects, I tend to go for vanilla CSS. Nowadays vanilla CSS is great and it has almost every feature you'd ever need. With the exception of nesting, which doesn't have a great browser support as of yet. If the code is getting longer and I'm not using a framework and my CSS lives in one file, then I go for SCSS. I love it, nesting is easily and improves readability, especially if you follow BEM class naming. +1: If you feel comfortable with CSS, you could look into Tailwind. I'm using Tailwind for most of my projects as of late, and I hugely prefer it over regular CSS or SCSS. If you know what you're doing, it can be an incredibly fast way of styling a page.
Units
Eh, this is a tough one. I use em/rem for almost everything (paddings, margins, max-width, etc). For very small things, like border-radius or box-shadow, I use px. vh/vw I use if I want to position stuff in the background - or giving the body a min-height of 100vh. % I honestly rarely use, but I'm sure there are use cases of it. I'd suggest you try a few approaches, but don't stress over this too much. As long as you're using rems and not pixels and not setting a fixed width and height on things, you're mostly good to go.
Looking at your code what you could do: stop using px for font-size. Rem is the most optimal for this. The height on the body has to be min-height. Margins, paddings you can set in em or rem, vmin... (Kevin Powell has loads of videos on this, with examples).
Grid&Flexbox
Again, whatever works for you. In this regard, as long as it looks good, there isn't really a bad way to do it or such things as too much flexbox.
Ok, I think I wrote enough. :)) As I mentioned, if you don't already know Kevin Powell's channel, do check it out, he has a video on everything that is CSS related, probably. You did great, I'd suggest not to stress too much and just practice. :) You'll get a feel to it.
Marked as helpful1@vojtakala-itPosted about 1 year ago@FluffyKas
Hello,
thank you very much for your rich feedback! Appreciate it :-).
I'll surely look into the Tailwind CSS you mentioned, thanks for the tip!
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