DEV Community

loading...
Cover image for When CSS Beat Javascript

When CSS Beat Javascript

msarit profile image Arit Amana Originally published at arit.dev ・2 min read

Enjoy content similar to this post on my blog Arit, Developer!
Subscribe to my newsletter
to receive quasi-monthly emails whenever I publish a new story.

My team was building out several React components for the front-end of what would be a highly-trafficked app. One of these components required that if the page's subtitle was longer than 70 characters, we inserted a break at the 70-character point, for the sentence to continue on a new line. Checking the database that supplied the app's data, we determined that no subtitle was longer than 140 characters. So we'd probably need to break subtitles only once.

Another dev had created the subtitle component, and I was tasked with adding another feature to it. I opened the file and saw this function for fulfilling the subtitle's 70-character width requirement:

It took me several minutes to understand what the function was doing:

  • First the sentence (string) is split into an array of its words (tokens), and a counter i is initialized to 1.
  • Next, accounting for spacing, we add the lengths of each word in tokens together. With each addition, we check if the total is less than 70; if so, we add the length of the next word to our total.
  • The goal is to identify the word before which the sentence is at or just below 70 characters (indicated by the incrementing i value), and then break the sentence at that word (this is what the return line does).

The approach was effective - it met task requirements. But could it be simpler?

I thought so, and googled "limit sentence length to number of characters html css". I discovered the ch property, one of several font-relative CSS units. 1ch is equal to the width of the zero ('0') character of the current font-family, at the current font-size. It is important to note that the ch value will change for different font-families. But considering that my team follows very strict typography standards, I wasn't worried about this potential variation in the ch value.

I deleted the Javascript function and then, within CSS, I set the maximum width of the subtitle's container equal to 70ch:

It was very satisfying to have my fellow devs review and embrace my implementation as the simpler approach indeed.

As a bootcamp-educated developer, I would always feel the pressure to quickly level up to the 'higher' programming languages, and 'graduate' from HTML and CSS. With more experience, however, I'm finding that it is not about how bloated my developer tool belt is. It always comes back to: Can I solve this problem/implement this feature? How will I do it? How simple is it? How understandable? How maintainable?

Enjoy content similar to this post on my blog Arit, Developer!
Subscribe to my newsletter
to receive quasi-monthly emails whenever I publish a new story.

Discussion

pic
Editor guide
Collapse
pclundaahl profile image
Patrick Charles-Lundaahl

Yes! This is wonderful.

I'm always amazed at how many people default to JavaScript when CSS would solve the problem simpler, in less code, and with fewer demands on their users' bandwidth, CPU, and battery life.

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

On the opposite end of the spectrum are people who are vehemently opposed to touching JavaScript, even when it's the right tool for the job, and insist on writing hundreds of lines of obscure CSS :D

Collapse
pclundaahl profile image
Patrick Charles-Lundaahl

Fair point!

I don't recall ever having seen this in the wild, but I'm sure it must be out there (and I suppose really, I know far more skilled JavaScript programmers than those who are skilled in CSS, so my bubble is obviously pretty biased).

Thread Thread
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

You'll often encounter it on Codepen, and it's usually done tongue-in-cheek to show off how far you can get with CSS alone. I haven't personally encountered devs who are actually obstinate about using CSS over JS.

Collapse
craigmc08 profile image
Craig McIlwrath

That's a neat trick! But, the two code snippets are the same, we can't see the js solution.

Collapse
benjaminlewandowski profile image
Benjamin Lewandowski

The css solution also shows the js solution. But only in the app, maybe it's an bug…

Collapse
msarit profile image
Arit Amana Author

Hmmm that's strange! I'm seeing it render normally on desktop and mobile. Perhaps I'll flag it for the dev team.

Thread Thread
facundocorradini profile image
Facundo Corradini

I can confirm the bug. Weirdly enough, it looked OK the first time I read it (JS snippet first, CSS solution later), but now I'm seeing them in inverse order :s

There might be something wrong with the handling of gist on DEV...

Collapse
msarit profile image
Arit Amana Author

Hello! There's actually no JS solution, there's the original JS implementation, and then my implementation using CSS 😄

Collapse
michael12lv profile image
Michael12lv

Hello! I want to thank grademiners.com/. Thought that I was expelled from the university, said goodbye to the diploma. But then I found a way out of the situation, on Google sites that write abstracts on order, and decided to order a scientific paper. They wrote great! I confirmed my work and got a diploma! Thanks guys.

Collapse
marflage profile image
Istabraq Shaheer

The code snippets are in reverse order. The first is CSS and the second is JS, where as it should be the opposite