DEV Community

Daniel Madalitso Phiri
Daniel Madalitso Phiri

Posted on

4 2

Dynamic Styling in Vue.js: Inline CSS

If you know me, you know I like Vue.js fro some reason, I don't hide my love for it's simplicity and elegance. I almost always learn something super cool that you can do with it. You know - developers, always learning. Today in my Vue adventures, I'm sharing a brief into to dynamic styling.

I was putting together a project and thought, "Wouldn't it be cool if we could change background colours dynamically by injecting a JavaScript data object into CSS?" - sort of.. A few google searches later I came found that Vue.js supports this.

In the official Vue.js Documentation, it's referred to as Class and Style Bindings

Have a look ✨

Please don't shame me for my crappy CSS, I really had to put this together quick 😖

Anyways I think it's a pretty cool way to do styling for some very specific use cases.

  • Animating buttons for user actions
  • Highlighting fields to emphasize a certain flow
  • Customizing user display options

In my example, I used inline CSS to change the styling of tags. You could change the font size, text decoration or colour. In theory as long as it is a CSS property, Vue can change it dynamically. If you look through the CodeSandbox code, you notice a couple of data properties - textSize,textColor and textDec all interpolated into some inline CSS as a reference value for specific CSS properties and that's it. Super fun.

Note: CSS has uses kebab case (font-size) and that throws errors for inline styling. Vue lets you use the camel case equivalent (fontSize) to style things dynamically just in case you get into some trouble.

We can keep adding a bunch of inline CSS with the data properties but it's messy and does make the most readable code ever. So lets over complicate things (jokes) and go for CSS classes! Hopefully they'll be cleaner.

Just as we did for styling, we can bind classes to HTML in. We'll do that next time with hopefully much better CSS and more real world examples. Let me know if you try it and how it works out for you.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay