
Ask HN: Why do I see so much crazy inline styling on websites these days? - TicklishTiger
I just googled for &#x27;cloud hosting&#x27; and landed here:<p>https:&#x2F;&#x2F;try.digitalocean.com&#x2F;cloud-hosting&#x2F;<p>I&#x27;m often curious how the source of a page looks like. So I inspected the headline &quot;Cloud hosting developers love.&quot;.<p>This is what I found:<p>&lt;h1 style=&quot;line-height: 77px;&quot;&gt;
&lt;span style=&quot;font-size: 60px; letter-spacing: -1.33px;&quot;&gt;&lt;span style=&quot;color: rgb(255, 255, 255);&quot;&gt;&lt;span class=&quot;ub-dynamic&quot;&gt;Cloud&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-size: 72px; letter-spacing: -1.33px;&quot;&gt;&lt;span style=&quot;color: rgb(255, 255, 255);&quot;&gt;&amp;nbsp;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-size: 60px; letter-spacing: -1.33px;&quot;&gt;&lt;span style=&quot;color: rgb(255, 255, 255);&quot;&gt;hosting&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;br&gt;
&lt;span style=&quot;font-size: 60px; letter-spacing: -1.33px;&quot;&gt;&lt;span style=&quot;color: rgb(255, 255, 255);&quot;&gt;developers love.&amp;nbsp;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;h1&gt;<p>I find this kind of crazy inline styling and absurd choice of elements pretty often these days. Why? What is going on?
======
soneca
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.

A kind of old, but relevant source:
[https://developers.google.com/speed/pagespeed/service/Priori...](https://developers.google.com/speed/pagespeed/service/PrioritizeCriticalCss)

------
hrbrmstr
That particular page appears to have been created with "Unbounce"
([https://preview.unbounce.com/](https://preview.unbounce.com/)) (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.

------
shoo
> crazy inline styling and absurd choice of elements pretty often these days

i'd be interested to hear what objectively measurable properties this way of
doing things might suffer from. e.g.

    
    
      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?
    

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...

(context: genuine interest, backend dev who has largely dodged having to care
about html for the last n years...)

------
CraftThatBlock
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.

------
craftoman
Seems like it was generated by some kind of a WYSIWYG editor or maybe it's
just another simple obfuscating tool designed for simple scrappers.

------
notahacker
Inlining of "critical" css is favoured for page load speed, but not like
that...

------
LarryMade2
Might be for use on web and email advertisements where inline styling is a
necessity.

------
Khelavaster
From a WYSIWIG editor or the result of manual PSD2HTML conversion.

------
pesfandiar
Most likely the product of server-side automated styling.

