Is using parenthesis in HTML classes okay?

user_4614064 0
Viewed 1254

I'm trying to create some helper classes in a reusable and readable way.

I want to use this scheme : class="property-name(direction)(value)"

For example : class="margin(top)(15)"

In CSS, It will be written as .margin\(top\)(\15\) { ... }

Does it works? Yes, see the fiddle below:

.sample__wrapper {
  border: 1px solid #eee;
  padding: 15px;
}

.sample__item {
  width: 100%;
  height: 100px;
  background: #eee;
}

.margin\(top\)\(15\) {
  margin-top: 15px;
}
<div class="sample__wrapper">
  <div class="sample__item"></div>
  <div class="sample__item margin(top)(15)"></div>
</div>

Because I rarely see this kind of syntax (using \ for parenthesis), I wonder if It's allowed to do so?

EDIT

  • Regarding the grammar of CSS (here 2.1), parenthesis are allowed.
  • Thanks to @Dan Kreiger in comments below, there is a CSS framework - using the same "readability idea" - called Atomic CSS. Also, a link to a CSS tricks article about it (not the Framework, the terminology).
  • Finally, HTML will be (to me) extremely readable. CSS or JS will not!
  • Have fun! ☺
parentheses css html
1 Answers

This might not be the answer of the question as it is primarily opinion based.

It's better to use BEM in the context of re-usability and readability. It gives the classes a good structure compare to what you are going with.

Using \ each and every time while defining the classes it would be a mess.

user_39504220
Related