# Port classnames to Hugo, Simplify class name builder

**URL:** <https://discourse.gohugo.io/t/port-classnames-to-hugo-simplify-class-name-builder/42065>\
**Category:** feature\
**Created:** [December 24, 2022, 6:19am UTC](https://discourse.gohugo.io/t/port-classnames-to-hugo-simplify-class-name-builder/42065 "2022-12-24T06:19:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![septs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/septs/32/18108_2.png) [@septs](https://discourse.gohugo.io/u/septs)\
**Post date:** [December 24, 2022, 6:19am UTC](https://discourse.gohugo.io/t/port-classnames-to-hugo-simplify-class-name-builder/42065/1 "2022-12-24T06:19:24Z")

</div>

TL;DR, see [classnames - npm](https://www.npmjs.com/package/classnames)

```auto
class="main {{- $active }} is-active{{ end }}"

```

vs

```auto
{{-
$classes := classNames
  "main"
  (dict "is-active" $active)
-}}
class="{{ $classes }}"

```

---

<div class="post-metadata">

**Author:** ![idarek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/idarek/32/26229_2.png) [@idarek](https://discourse.gohugo.io/u/idarek)\
**Post date:** [December 24, 2022, 8:06am UTC](https://discourse.gohugo.io/t/port-classnames-to-hugo-simplify-class-name-builder/42065/2 "2022-12-24T08:06:14Z")

</div>

In what meaning/usage?

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [December 24, 2022, 10:46am UTC](https://discourse.gohugo.io/t/port-classnames-to-hugo-simplify-class-name-builder/42065/3 "2022-12-24T10:46:02Z")

</div>

It seems more complex to me.

```go
class="main{{ cond $active `is-active` `` }}"

```

This may be achieved by `delimit`.

```go
{{ $classes := slice 
  "main"
  (cond $active "is-active" "")
}}
class="{{ delimit $classes ` ` }}"

```

> The empty class names will be formatted via `--minify` flag.