4

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! ☺
Alexis Wollseifen
  • 441
  • 1
  • 6
  • 21
  • If you plan to do this, then its better to just write `style="margin-top:15px"`. – Volvox Nov 14 '17 at 09:30
  • I'm creating a set of helper classes. It's not about styling in CSS (here, margin) but more about syntax :) – Alexis Wollseifen Nov 14 '17 at 09:32
  • 2
    Related [Which characters are valid in CSS class names/selectors?](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) – Paolo Forgia Nov 14 '17 at 09:33
  • 1
    Somebody is gonna have a good laugh reviewing this code if it exists in a real program – Trash Can Nov 14 '17 at 09:34
  • 1
    The only downside I can see is that it will make your CSS and JS a lot harder to read (and code). There is an architecture out there that you might have heard of called [Atomic CSS](https://acss.io/). I've seen people apply Atomic CSS without using parentheses too, but the docs actually encourage the use of parentheses. There's no right answer here, but I find atomic classes to be very useful. I guess another thing to keep in mind is that if you use parentheses, you will have to stick to that pattern for all your atomic classes. – Dan Kreiger Nov 14 '17 at 09:51
  • Thank for your link @PaoloForgia, it looks like it's okay to use it. Strange I've almost never seen this anywhere... Thanks again :) – Alexis Wollseifen Nov 14 '17 at 09:52
  • @Dummy -- I know, CSS will looks reaaaaally wierd, but HTML will be so readable, and I only my HTML to be readable at this time. – Alexis Wollseifen Nov 14 '17 at 09:52
  • @DanKreiger -- Thank you a lot, actually that's exactly the same syntax I'm looking for. I'm not a fan of CSS framework, but in one of my current projects, I have to integrate it and after, send it to a backend dev. He will only works on HTML but have to manipulate some layout. Who knows why, I really prefer `margin(top)(30)` to `mtop-30` :) Thanks again, ACSS will help me a lot! – Alexis Wollseifen Nov 14 '17 at 09:57
  • 1
    @AlexisWollseifen No problem - I just found [this article](https://css-tricks.com/lets-define-exactly-atomic-css/). It points out the different flavors of atomic css. It might be what you're looking for, since atomic css is basically a way for people to create helper classes. – Dan Kreiger Nov 14 '17 at 09:59
  • Nice! I'm gonna edit my question and add answer and links below! Have a good day @DanKreiger! – Alexis Wollseifen Nov 14 '17 at 10:01

1 Answers1

-1

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.

bhansa
  • 7,282
  • 3
  • 30
  • 55
  • 1
    Yeah I use BEM in every project, BEM and SASS is perfect. But I'm currently integrating a project which will be sent to a backend developer. In order to let him manage style without having to rebuild the project (using webpack), I think is better to give him a set of helper classes. So HTML readable only :) – Alexis Wollseifen Nov 14 '17 at 09:43