Skip to main content

Mastering Dynamic Styling

· 3 min read
Senol Tas
Senol Tas
Founder & Principal Engineer, Wunderframe

In modern web development, creating dynamic, responsive interfaces is everything. The ability to change styles and attributes on the fly based on application state is a cornerstone of a great user experience. That’s why we’re thrilled to introduce a set of new features in Wunderframe that make handling dynamic attributes and CSS classes more intuitive and powerful than ever.

Inspired by the declarative nature of frameworks like Svelte and Vue, we’ve baked in a new syntax that will feel right at home.

Attribute Shorthand: Clean and Concise​

Let's start with a simple but powerful enhancement: attribute shorthand. We often find ourselves assigning a variable to an attribute of the same name. Now, you can do it with a cleaner syntax.

Instead of this:

<script>
    local title = "A detailed description of the product"
</script>
<a href="/product/1" title={title}>View Product</a>

You can now write this:

<script>
    local title = "A detailed description of the product"
</script>
<a href="/product/1" {title}>View Product</a>

It's a small change, but it makes your templates less repetitive and easier to read.

The Power of Tables for Dynamic Classes​

This is where things get really exciting. Managing a list of CSS classes with string concatenation can be messy and error-prone. With our new table-based syntax for the class attribute, you can manage your classes declaratively.

Here’s how it works:

<script>
    local isActive = true
    local hasError = false
</script>

<div class={{
    ["card"]: true, -- Always apply the 'card' class
    ["card-active"]: isActive,
    ["card-error"]: hasError,
    ["p-4 rounded-lg"]: true -- Works great with utility-first frameworks!
}}>
    Your content here.
</div>

In this example, Wunderframe evaluates the table and compiles a final class string based on which keys have a true value. The result is a clean, readable class list:

<div class="card card-active p-4 rounded-lg">
    Your content here.
</div>

This approach is incredibly powerful when working with utility-first CSS frameworks like Tailwind CSS. You can construct complex component styles from a set of conditions without a single string interpolation.

For even cleaner templates, you can define the table in your <script> block and pass it to the class attribute:

<script>
    local buttonClasses = {
        ["btn"]: true,
        ["btn-primary"]: props.isPrimary,
        ["btn-large"]: props.size == 'large'
    }
</script>

<button class={buttonClasses}>Click me</button>

This new feature is all about improving the developer experience by providing tools that are both powerful and elegant. We believe these changes will help you write cleaner, more maintainable templates.

Dive into our documentation on Dynamic Attributes & Classes to learn more. Happy coding!

Share Your Thoughts​

Have thoughts, questions, or feedback? We'd love to hear from you! Reach out to us on X, or connect directly with me @thelabertasch.