I just googled for 'cloud hosting' and landed here:<p>https://try.digitalocean.com/cloud-hosting/<p>I'm often curious how the source of a page looks like. So I inspected the headline "Cloud hosting developers love.".<p>This is what I found:<p><h1 style="line-height: 77px;">
<span style="font-size: 60px; letter-spacing: -1.33px;"><span style="color: rgb(255, 255, 255);"><span class="ub-dynamic">Cloud</span></span></span><span style="font-size: 72px; letter-spacing: -1.33px;"><span style="color: rgb(255, 255, 255);">&nbsp;</span></span><span style="font-size: 60px; letter-spacing: -1.33px;"><span style="color: rgb(255, 255, 255);">hosting</span></span>
<br>
<span style="font-size: 60px; letter-spacing: -1.33px;"><span style="color: rgb(255, 255, 255);">developers love.&nbsp;</span></span>
</h1><p>I find this kind of crazy inline styling and absurd choice of elements pretty often these days. Why? What is going on?
It is a good practice for static pages focused on performance (e.g. landing pages like this one) that the critical CSS is inline. It is common that all CSS for above the folder content is inline - usually done through a processor, so the development code is kept sane.<p>A kind of old, but relevant source: <a href="https://developers.google.com/speed/pagespeed/service/PrioritizeCriticalCss" rel="nofollow">https://developers.google.com/speed/pagespeed/service/Priori...</a>
That particular page appears to have been created with "Unbounce" (<a href="https://preview.unbounce.com/" rel="nofollow">https://preview.unbounce.com/</a>) (the "lp-*" strings give that away). If you look for said "lp-" strings on the web there are more than a few pages using them. Unbounce is primarily designed for creating HTML email that won't break and won't get auto-rejected and it's likely easier for the builder program to stick in hardcoded values in-tag than to rely on complex CSS, especially with the varied capabilities of mail clients.
> crazy inline styling and absurd choice of elements pretty often these days<p>i'd be interested to hear what objectively measurable properties this way of doing things might suffer from. e.g.<p><pre><code> 1. does it result in more data being sent over the wire?
2. does it result in slower page load speed?
3. is it less widely supported by browsers?
4. is it harder to maintain?
</code></pre>
It's a bit hard to assess if this is easy to maintain without knowing how the page is generated. Maybe it's built by some pipeline that is very easy for the developers to maintain & easy for people to tweak the styles...<p>(context: genuine interest, backend dev who has largely dodged having to care about html for the last n years...)
Also, many React libraries automatically inline styles when server-side rendered, to (as mentioned by other commenters) improve page performance. The developers working on the page most likely didn't write the style directly inline, but was added in compilation, through a library, or using React's style prop.