Introducing Rececss: simple but highly customizable alternative to Tailwind
Tags: showdev, css, webdev, productivity
Published: 2021-04-11 14:37:58

As many front-end developers I've realized the benefits of css utility classes approach for styling. Tailwind is indeed a great tool but I've been constantly finding myself in a situations when I got pretty much exhausted by configuring it to use values, classnames or states I wanted to.

So I decided to have fun and develop yet another css utils generator with this motivation in mind:

1. Autogenerated unit values with range syntax support.
2. Ability to split output files by media queries.
3. More control over state utilities (`:hover`, `:active`, js states). 
4. Rich classnames customization that default to [Emmet abbreviations](https://docs.emmet.io/cheat-sheet).

And here's what I came up with:
{% github re-ce/rececss no-readme%}

## Configuration 

```javascript
// rececss.config.js

module.exports = {
  output: {
    path: ".",
    splitByMedia: true,
  },
  media: {
    md: "only screen and (min-width: 768px)",
    lg: "only screen and (min-width: 1024px)"
  },
  rules: {
    width: { $px: [50, 100], $pct: [100] },
    height: { $px: [50, 100] },
    padding: {
      edges: { $px: [[0, 50, 5]] }
    },
    margin: {
      edges: { $px: [-80, [0, 50, 5]] }
    },
    font: {
      size: { $px: [[8, 24, 2]] },
      family: { pri: "'Archivo Black', sans-serif", sec: "'Montserrat', sans-serif" },
    },
    border: {
      shorthand: { sep: "1px solid rgba(0,0,0,0.1)", frame: "10px solid #fff", },
      radius: { $px: [15], $pct: [50] },
    },
    background: {
      color: { light: "#fff", blue: "#ECF0FB", }
    },
    shadow: {
      box: { air: "0px 4px 12px rgba(0, 0, 0, 0.08)", }
    },
    color: { blue: "#51568A" },
  },
}

```
## Usage

Running `npx rececss` from within a folder that contains this config will generate three separate css files which later could be used in your markup:

```html
<link href="./rececss.css" rel="stylesheet">
<link href="./rececss.md.css" rel="stylesheet" media="only screen and (min-width: 768px)">
<link href="./rececss.lg.css" rel="stylesheet" media="only screen and (min-width: 1024px)">
```

If `media` is provided browsers will apply the lowest [download priority](https://css-tricks.com/the-critical-request/) to the stylesheets that didn't matched its media query. 

Check out the generated classnames in action:

```html
<body class="bgc_blue p_30">
  <div class="bgc_light bdrs_15 bxsh_air p_30 mt_50">
    <div class="d_f fxd_c ai_c md:fxd_r">
      <img
        src="./avatar.jpg"
        class="w_100 h_100 bd_frame bdrs_50% mt_-80 md:bdrs_15 md:mt_0 md:bd_n"
      />

      <div class="ta_c md:ta_l md:pl_15 md:d_f jc_sb fx_a ai_c">
        <div class="ph_10">
          <p class="ff_pri c_blue mv_10 fz_24 md:mt_0">Some Person</p>
          <p class="ff_sec m_0 mb_30 md:mb_0">JS Developer</p>
        </div>

        <div class="d_f jc_c">
          <div class="ph_15 bdr_sep">
            <p class="ff_pri c_blue fz_20">$6460</p>
            <p class="ff_sec">Income</p>
          </div>
          <div class="ph_15 bdr_sep">
            <p class="ff_pri c_blue fz_20">$1240</p>
            <p class="ff_sec">Expenses</p>
          </div>
          <div class="ph_15">
            <p class="ff_pri c_blue fz_20">$870</p>
            <p class="ff_sec">Loan</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
```

And the result:

![Example result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7fpdnvporh8vrcgsunu.gif)

Check out the documentation if you're interested on how to modify classnames, use `:hover`, `:focus`, or even javascript driven states.

The project is in the early stage of development so I would be really happy to receive any feedback. If you want to help feel free to open an issue, submit a PR or just  give this thing a star if you like it. 

{% github re-ce/rececss no-readme%}

Thanks for reading.