DEV Community

Calin Baenen
Calin Baenen

Posted on

Spark-CSS Syntax : What do you think?

This is the conceptualized syntax for Spark-CSS, which is already well in development:

<header data-fullwidth data-flow="flex row evenly-spaced-children">
  <a href="/documentation/">Documentation</a>
  <a href="/demos/">Demos</a>
  <!-- ... -->
</header>

<main data-flow="flex col">
  <section>
    <h2>First Section</h2>

    <p>Lorem ipsum.</p>
    <p>This webpage is for testing purposes only!</p>
  </section>

  <section>
    <h2>Text Styling</h2>

    <p data-textstyle="justified">
      Today, I just found out that Spark has a lot of potential — thanks to all the unique 'marker attributes', adjusting the styling of an
      element has never been easier.<br/>
      This text <u>should</u> be justified...
    </p>

    <p>This text has an <span data-textstyle="s u o">underline, strikethrough, and overline.</span>.</p>
  </section>
</main>
Enter fullscreen mode Exit fullscreen mode

The library, and, by extension, its syntax, is meant to make replacing trivial, boilerplate CSS (and certain HTML styling elements) with easy to read data-* attributes.
The attributes themselves are named in a way that attempts to be intuitive and concise; the values ov the attributes are meant to provide a decent amount ov flexibility, and, in some cases, work together to create something.

For example, take the data-flow="flex row", which represents a flex-container that has a flex-direction ov row.
Why isn't it flex-row?    /rt
Well, row (and col) can both be used with a grid flow instead; using a grid with row or col sets the grid-auto-flow property to row or column respectively.


Another thing about this library is that it aims to work on as many browsers as possible... even the outdated ones that no one uses anymore, such as Internet Explorer!
For browsers that don't support certain things, sensible fallbacks are provided.

Here's a snippet ov the CSS:

*[data-flow~="flex"] {
  display:inline-block;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
Enter fullscreen mode Exit fullscreen mode

With all this information, I ask this:  what do you (all) think ov my CSS library and its syntax? Does the idea seem promising?

Thank you for reading!
Cheers!

Top comments (0)