---
schema_version: "1"
id: 24a08a814482685ddfeb01ae66a40ec4506212c8dd309c9ca96a9297ef16f89a
title: More Readable Styling Markup with the join Expression
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/apps/apps-css-markup.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-css-markup.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: cf772a7afdcd27714d466c7e26d1ea39386b15cff769e884a9305797ba11a594
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# More Readable Styling Markup with the join Expression

Markup can get messy when you specify the class names to apply based on the component attribute values. Try using a `join` expression for easier-to-read markup.

This example sets the class names based on the component attribute values. It’s readable, but the spaces between class names are easy to forget.

```nolang
<li class="{! 'calendarEvent ' +
    v.zoomDirection + ' ' +
    (v.past ? 'pastEvent ' : '') +
    (v.zoomed ? 'zoom ' : '') +
    (v.multiDayFragment ? 'multiDayFragment ' : '')}">
    <!-- content here -->
</li>
```

Sometimes, if the markup is not broken into multiple lines, it can hurt your eyes or make you mutter profanities under your breath.

```nolang
<li class="{! 'calendarEvent ' + v.zoomDirection + ' ' + (v.past ? 'pastEvent ' : '') + (v.zoomed ? 'zoom ' : '') + (v.multiDayFragment ? 'multiDayFragment ' : '')}">
    <!-- content here -->
</li>
```

Try using a `join` expression instead for easier-to-read markup. This example `join` expression sets `' '` as the first argument so that you don’t have to specify it for each subsequent argument in the expression.

```nolang
<li
    class="{! join(' ', 
        'calendarEvent',
        v.zoomDirection,
        v.past ? 'pastEvent' : '',
        v.zoomed ? 'zoom' : '',
        v.multiDayFragment ? 'multiDayFragment' : ''
    )}">
    <!-- content here -->
</li>
```

You can also use a `join` expression for dynamic styling.

```nolang
<div style="{! join(';', 
    'top:' + v.timeOffsetTop + '%',
    'left:' + v.timeOffsetLeft + '%',
    'width:' + v.timeOffsetWidth + '%'
)}">
    <!-- content here -->
</div>
```

**See Also**  


-   [Expression Functions Reference](https://developer.salesforce.com/docs/platform/aura-platform/expr/expr-functions.md)