1. Efficiency, which I define as minimising losses i.e not writing things inefficiently, avoiding artificial complexity, bloat and keeping code simple. Performance hits here can also be a 1000 cuts problem when depending on many 3rd party pieces while having people chanting "premature optimisation" at you.
2. Optimization, which I define as employing specialist algorithms (which sometimes come in the form of entire tech stacks these days) with the cost of added complexity (and potentially performance trade) to get performance beyond the basic or naive yet efficiently implemented methods. The cost benefit ratio to these is not always worth it, especially in the beginning.
Hopefully the point I'm trying to make should be obvious, that attempting #2 before #1 is a bad idea, and in less explicit words I suspect this is kind of what the author is getting at... Yet it's not all that uncommon to see someone trying to fit a turbocharger to a cheese skateboard with 64 triangular wheels.
In my experience, knowing CSS is 90% of making a pretty and informative page. HTML is mostly just h1 for title, h2 for subtitle, div for groups and p for copy text.
I don’t like writing neither HTML nor CSS so my websites are written in Plim with Tailwind classes for styling.
Here’s a snippet that defines the icon on the https://lowtechguys.com/clop page
section#hero.min-w-[100vw].flex-center.flex-col.relative.pb-20
img.w-28.h-28.md:w-32.md:h-32.filter.drop-shadow-2xl src="/static/img/clop-icon.png"
h1.mb-6.text-4xl.text-zinc-600 Clop
h5.text-gray-500.m-0.p-0 Clipboard optimizer for images
h5.text-gray-500.m-0.p-0.-mt-1 Copy large, paste small, send fast
You can see how most of the text is just Tailwind classes which are basically CSS one liners.It’s not easy to understand nor pretty to read, but it makes for super fast iteration time, especially because of the responsive breakpoints (e.g. .flex-col.md:flex-row for a vertical layout on mobile and horizontal on desktop)