I’ve been studying a particular website that I liked and trying to understand how it gets its effects, and then today I had the bright idea of, you know, actually looking at the code. So I copied the source code and began to split it up into different files on my computer.
And was surprised to find there was over 10000 lines of CSS.
Yes, 10000.
So… is this normal for a complicated page of HTML, to have 10K lines of CSS?
probably it’s a framework that does that…
edit: yup, react and who knows what else: https://builtwith.com/spinxdigital.com
There is a fair bit of library code (transitions/animations and sliders) and likely some backend stuff for things you do not see (admin/CMS type things).
But it doesn’t look like the code is very modular/reusable or is using utility classes much.
The older the codebase the more likely it is to have been build with less than ideal CSS and it will also tend to get bloated without some refactoring. CSS can get hard to clean up, especially when written in certain ways because it’s hard to know and test where some piece of CSS is used on all of the site. So to avoid breaking something unrelated people often do not touch old CSS and just add new CSS instead.
Interesting, I noticed when I was trying to sort of clone it (but using my own techniques), that they were using more old-fashioned techniques like floats and tables, etc, whereas I’m more about flexbox and grid.
You are going to find that a lot of “professional” web sites aren’t really as well put together as they appear. Just doing some basic responsiveness testing I am already finding several issues that a web site for a web design firm should not be making. Heck, just changing the browser width makes the whole page basically refresh (which can take seconds to complete) and makes my cpu usage jump up briefly to the point I can hear my cpu fan speed up. To me those are all signs that this page is way over-engineered trying to do to much (and not very well).
If you are trying to clone this then make sure you fix all their issues 
Heh, I think it’s mostly flash. Don’t worry, I was cloning it because of design not because of their techniques.
I hope not because those portions of their website are going to stop working very soon as I believe all the major browsers are going to stop supporting it in the near future.
And the stuff I was finding issues with wasn’t flash related. I’ll give you one example. The menu at the top. Crank the text size up just a little and you start seeing problems. I mean, they are setting heights in px as if no one would ever view their page with an increased text size. Just stupid mistakes like this that a professional web design firm should not be making IMHO.
I shouldn’t have said “flash,” I meant it in the sense of animations and fun stuff, not the outdated technology Adobe Flash.
Yeah, I noticed that they use pixels instead of em/rem. Actually, zoomed-in looks fine on my screen for some reason.
By the way, if you have any recommendations for very well-engineered sites, maybe I’ll study one of those next.
Im new to coding and this caught my attention, is it considered “unprofessional” to have too many lines of code for a certain thing? or does it depend on how it’s ordered?
It depends on what you mean by “zoomed-in”. I was testing the responsiveness to changes in text size so I was manually increasing just the text size on page (everything else stayed exactly the same size). But you can also do a full page zoom in which everything increases in size. When you do a text-only zoom then things start to break on the page. A lot of web sites overlook this type of responsiveness.
I see… I actually don’t know how to manually change the text size, except going in the console and just changing them there.
I have noticed, because I used to use 125% on my old monitor all the time, that many, many sites can’t handle that.