@vanzasetia
Posted
Hi, Gem!
I am against the idea of challenging yourself by writing your CSS with a desktop-first approach. I don't see any benefit in doing it. Also, the mobile-first approach is the best approach. So, why do you make that decision?
You can't add an image description if you are making the image as a background image. You should use <img> element to be able to provide alternative text.
Also, you should use <picture> element for the image since there are two versions of the same image.
Never set width: 100vw on anything as it does not account for scrollbars when present. It may ever introduce potential overflow or scroll bugs.
I recommend having one stylesheet. If you want to have separate stylesheets, it is better to reference them within the HTML using <link> tags. Using @import will make the browsers do more request which can make site slower.
Learn more about CSS performance — CSS and Network Performance
I hope this helps. Happy coding! 😄
Marked as helpful
@vanzasetia Thanks for looking into my code. Appreciated it.
Many projects I have worked before had the desktop designs available first before the mobile implementations arrived. There could be many reasons for doing so - like the website had a fully-functioning website design before they thought of having the mobile one, or that the design team had the desktop designs approved first as this was a much more priority over the mobile one.
Hands down I strongly prefer mobile-first approach, but if significant work has already been done it won't be a practical approach for those two situations above unless business is OK almost rewriting the front-end CSS (which is far less-likely to happen unless there's a big performance issue). The team would most likely be better off using their time to develop new features or squash priority bugs.
It's just that in real-life project experiences 90% of the time desktop implementation was already available before the mobile was thought of. So I cannot really insist for a mobile-first approach there unless the approach results big performance issues that can only resolved using that approach - it is something that a good tech lead should recommend to the business to have the team ample time to rework the CSS for the entire site.
I'll look into the <picture> element. It's quite new to me and I like that it's supported now in many modern browsers. I'll use this more on my next HTML-CSS project.
If I had to avoid width: 100vw, what should be the alternative? Can I just delete it?
For the @import one, I'm already aware it isn't a great idea to use as it is. Normally we'd work with libraries and frameworks that combine stuff automatically into one big CSS and JS file (and yeah, liberally use CSS @import and the compiler will do the rest and outputs it in a directory somewhere). But for this exercise which is just in one page, I choose to do so for maintainability and readability and just to be updated on the latest in HTML and CSS. Normally an HTML and CSS site only pages load up very quickly without needing to optimize a lot of stuff. (I just checked with Page Insights, Pingdom and GMetrix and all have high scores). But you are correct in thinking that we should future-proof our code if we know that we will be adding more features to the website.
@vanzasetia
Posted
@ladyprogrammer
You are welcome!
Fair enough! I never work in a company before (if that's what you mean by "real-life projects").
Based on my experience, the desktop-first approach results in much bigger CSS since you have to neutralize the styling. For example, in mobile layout, the design usually has only one column which is already the default styling. So, I only need media queries to create complex layouts. This result is a smaller CSS than the desktop-first approach.
Yes, you can remove width: 100vw. The horizontal scrollbar will be gone. Have you tried removing it? You can toggle it with the developer tool.
