# Coding Standard

**URL:** <https://forums.realmacsoftware.com/t/coding-standard/46304>\
**Category:** Elements API\
**Created:** [February 17, 2025, 5:36pm UTC](https://forums.realmacsoftware.com/t/coding-standard/46304 "2025-02-17T17:36:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 17, 2025, 5:36pm UTC](https://forums.realmacsoftware.com/t/coding-standard/46304/1 "2025-02-17T17:36:28Z")

</div>

Do you guys have any thoughts how you want developers to include custom styles?

Might end up in conflicts when using multiple dev-packs.

---

<div class="post-metadata">

**Author:** ![tpbradley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tpbradley/32/25503_2.png) [@tpbradley](https://forums.realmacsoftware.com/u/tpbradley)\
**Post date:** [February 17, 2025, 6:59pm UTC](https://forums.realmacsoftware.com/t/coding-standard/46304/2 "2025-02-17T18:59:28Z")

</div>

Hey @Beblebroks,

It’s always best to stick with tailwind classes where possible, it’ll ensure 100% compatibility with any other components you use, and reduce CSS.

However, it’s not always possible to do this, so when you need to use CSS you can scope a style to the instance of the component on the page using it’s id.

In the styles.css file

```auto
#{{node.id}} .heading {
    font-weight: bold;
}

```

And in the template file

```auto
<div id="{{node.id}}" class="p-10 text-lg text-center">
    <div class="heading">An interesting heading</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 17, 2025, 7:04pm UTC](https://forums.realmacsoftware.com/t/coding-standard/46304/3 "2025-02-17T19:04:17Z")

</div>

I thinking about a function you guys had years ago to obviouscate email. I am using a new CSS / JS approach to it. To avoid spam and that can not be achieved with Standard Tailwind.

```auto
.cryptedmail:after {
  content: attr(data-a) "@" attr(data-b) "." attr(data-c);
}

```

And use JS to fire the actual mailto. Works with Whatsapp as well.

---

<div class="post-metadata">

**Author:** ![tpbradley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tpbradley/32/25503_2.png) [@tpbradley](https://forums.realmacsoftware.com/u/tpbradley)\
**Post date:** [February 17, 2025, 7:11pm UTC](https://forums.realmacsoftware.com/t/coding-standard/46304/4 "2025-02-17T19:11:16Z")

</div>

Yeah ok, I think you should be able to use the same method posted above. Something like this

```auto
#{{node.id}} .cryptedmail:after {
  content: attr(data-a) "@" attr(data-b) "." attr(data-c);
}

```

And then use the `{{node.id}}` within the JS file too.

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 17, 2025, 7:23pm UTC](https://forums.realmacsoftware.com/t/coding-standard/46304/5 "2025-02-17T19:23:52Z")

</div>

![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/7/578779a158603cd6230d9489a36067844c12df78.png)

Works … awesome