<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/let-css-do-the-work-xutdyoud8" -->

---
title: Let CSS do the work | daily.dev
description: Using JavaScript to calculate and set inline styles (like element heights) is an anti-pattern. Instead, pass raw data values to CSS via custom properties and...
canonical: https://daily.dev/posts/let-css-do-the-work-xutdyoud8
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: Let CSS do the work | daily.dev
og:description: Using JavaScript to calculate and set inline styles (like element heights) is an anti-pattern. Instead, pass raw data values to CSS via custom properties and...
og:url: https://daily.dev/posts/let-css-do-the-work-xutdyoud8
og:image: https://api.daily.dev/og/posts/XutDyOUd8.png
og:image:alt: Let CSS do the work
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Let CSS do the work

**[Kevin Powell](https://daily.dev/sources/kevinpowell)** · 5 min read · 122 upvotes · 10 comments

## Summary

Using JavaScript to calculate and set inline styles (like element heights) is an anti-pattern. Instead, pass raw data values to CSS via custom properties and let CSS handle the styling logic using functions like calc() and min(). This approach keeps styling concerns in CSS, makes updates easier to find and change, and likely improves performance by offloading visual calculations from JavaScript.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.youtube.com/watch?v=3-97xCM_N1I>

## Questions this post answers

### How do I convert a raw data value into a CSS custom property to size an element like a progress bar?

Set the raw value as a CSS custom property from JavaScript (for example --precip: 8.2) instead of computing a pixel height in JavaScript and applying an inline style. Then use CSS calc() with var() to turn that value into a percentage or pixel size, for example block-size: calc(var(--precip) / var(--max-precip) * 100%), keeping all styling math inside CSS.

_Anyone weighing where UI calculations belong can compare approaches like this via daily.dev before refactoring a component._

### How do I prevent a CSS calc() based bar or progress indicator from overflowing past 100%?

Wrap the calc() expression in a min() function alongside a hard cap value, such as min(calc(var(--precip) / var(--max-precip) * 100%), 100%). This ensures that if the computed percentage exceeds 100%, CSS clamps it to 100% instead of letting the element overflow its container, replicating logic that would otherwise require a Math.min() call in JavaScript.

_Developers debugging overflow issues in CSS-driven visuals can find similar CSS techniques through daily.dev._

## Community discussion

Top comments from developers on daily.dev.

**@di2namic11** · 4 upvotes

> Yes, styling belongs to CSS.

**@heracles2756** · 3 upvotes

> I agree, Many CSS frameworks such as tailwind css, scss implemented so that we can use it flexible.

**@johnstewart62** · 3 upvotes

> Good video! Thanks Kevin

**@ivanzindl** · 2 upvotes

> Good video!

**@tammolambeck** · 1 upvotes

> Totally agree. Styling logic should be in CSS, application logic belongs in Javascript.

## Similar posts on daily.dev

- [Stop using JavaScript to solve CSS problems](https://daily.dev/posts/stop-using-javascript-to-solve-css-problems-utawse2td) · LogRocket · 208 upvotes · 8 comments
- [Wanna see a CSS magic trick?](https://daily.dev/posts/wanna-see-a-css-magic-trick--wta2tfzuo) · Stack Overflow Blog · 76 upvotes · 4 comments

---

Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/let-css-do-the-work-xutdyoud8)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Let CSS do the work","url":"https://daily.dev/posts/let-css-do-the-work-xutdyoud8","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/let-css-do-the-work-xutdyoud8"},"datePublished":"2026-07-29T13:14:19.359Z","dateModified":"2026-09-14T08:04:20.586Z","description":"Using JavaScript to calculate and set inline styles (like element heights) is an anti-pattern. Instead, pass raw data values to CSS via custom properties and...","image":"https://i.ytimg.com/vi/3-97xCM_N1I/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/3-97xCM_N1I/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Kevin Powell","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Kevin Powell","logo":"https://media.daily.dev/image/upload/s--XK5Rf0kM--/f_auto/v1717745137/logos/kevinpowell","url":"https://daily.dev/sources/kevinpowell"},"commentCount":10,"discussionUrl":"https://daily.dev/posts/let-css-do-the-work-xutdyoud8","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":122},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":10}],"keywords":"javascript,css","timeRequired":"PT5M","video":{"@type":"VideoObject","name":"Let CSS do the work","description":"Using JavaScript to calculate and set inline styles (like element heights) is an anti-pattern. Instead, pass raw data values to CSS via custom properties and...","thumbnailUrl":"https://i.ytimg.com/vi/3-97xCM_N1I/sddefault.jpg","uploadDate":"2026-07-29T13:14:19.359Z","duration":"PT5M","url":"https://api.daily.dev/r/XutDyOUd8","embedUrl":"https://www.youtube.com/embed/3-97xCM_N1I"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Kevin Powell","item":"https://daily.dev/sources/kevinpowell"},{"@type":"ListItem","position":3,"name":"Let CSS do the work"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/let-css-do-the-work-xutdyoud8","comment":[{"@type":"Comment","text":"Yes, styling belongs to CSS.","datePublished":"2026-07-30T11:03:44.311Z","url":"https://daily.dev/posts/XutDyOUd8#c-TOVUtp06f","author":{"@type":"Person","name":"Emmanuel Tshiowa","url":"https://daily.dev/di2namic11","image":"https://media.daily.dev/image/upload/s--MSq1hVeO--/f_auto/v1768048978/avatars/avatar_deOg4xn8CTW59STw1Wkrz?_a=BAMAMiZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"I agree, Many CSS frameworks such as tailwind css, scss implemented so that we can use it flexible.","datePublished":"2026-07-31T06:40:30.151Z","url":"https://daily.dev/posts/XutDyOUd8#c-blxInFKKD","author":{"@type":"Person","name":"heracles 2756","url":"https://daily.dev/heracles2756","image":"https://media.daily.dev/image/upload/s--NoOPHSFv--/f_auto/v1785506917/avatars/avatar_iYIZwiJAMuCGXY2OiXW0x?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Good video! Thanks Kevin","datePublished":"2026-07-29T16:12:21.300Z","url":"https://daily.dev/posts/XutDyOUd8#c-DzuCxpsJD","author":{"@type":"Person","name":"John Stewart","url":"https://daily.dev/johnstewart62","image":"https://media.daily.dev/image/upload/s--kvHAbexP--/f_auto/v1783956120/avatars/avatar_4raeU5ZwsqH1K0EuYna8u?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Good video!","datePublished":"2026-07-29T17:10:00.766Z","url":"https://daily.dev/posts/XutDyOUd8#c-Q5vOULxK1","author":{"@type":"Person","name":"user1366","url":"https://daily.dev/ivanzindl","image":"https://media.daily.dev/image/upload/s--1Id2NYdy--/f_auto/v1769690304/avatars/avatar_BIkybuCHFtAWwBBK82URT?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Totally agree. Styling logic should be in CSS, application logic belongs in Javascript.","datePublished":"2026-07-31T06:27:27.674Z","url":"https://daily.dev/posts/XutDyOUd8#c-Af9lNRd5A","author":{"@type":"Person","name":"Tammo Lambeck","url":"https://daily.dev/tammolambeck","image":"https://media.daily.dev/image/upload/s--h0mMHKbj--/f_auto/v1748418636/avatars/avatar_suIn8x6OO5juFYHfxMJkd?_a=BAMClqUq0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/let-css-do-the-work-xutdyoud8#faq","mainEntity":[{"@type":"Question","name":"How do I convert a raw data value into a CSS custom property to size an element like a progress bar?","acceptedAnswer":{"@type":"Answer","text":"Set the raw value as a CSS custom property from JavaScript (for example --precip: 8.2) instead of computing a pixel height in JavaScript and applying an inline style. Then use CSS calc() with var() to turn that value into a percentage or pixel size, for example block-size: calc(var(--precip) / var(--max-precip) * 100%), keeping all styling math inside CSS. Anyone weighing where UI calculations belong can compare approaches like this via daily.dev before refactoring a component."}},{"@type":"Question","name":"How do I prevent a CSS calc() based bar or progress indicator from overflowing past 100%?","acceptedAnswer":{"@type":"Answer","text":"Wrap the calc() expression in a min() function alongside a hard cap value, such as min(calc(var(--precip) / var(--max-precip) * 100%), 100%). This ensures that if the computed percentage exceeds 100%, CSS clamps it to 100% instead of letting the element overflow its container, replicating logic that would otherwise require a Math.min() call in JavaScript. Developers debugging overflow issues in CSS-driven visuals can find similar CSS techniques through daily.dev."}}]}
```