npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

micro-css

v2.0.2

Published

A CSS preprocessor that provides a simplified object orientated approach to css. The syntax is very similar to CSS but encourages better reuse of classes and discourages high specificity.

Downloads

108

Readme

Micro CSS

A CSS preprocessor that provides a simplified object orientated approach to css. The syntax is very similar to CSS but encourages better reuse of classes and discourages high specificity.

NPM

BREAKING CHANGES IN v1.0

  • element classes are no longer prefixed with //. in generated output
  • mixins are now prefixed with _ instead of $ to avoid escaping in generated output.

BREAKING CHANGES IN v2.0

  • mixins are back to a $ prefix and are no longer exported to generated css (can only be used by other styles)

A bit of background

I think there comes a time in any front-end web developer's life when CSS stops being "the most amazing powerful design language on earth" and changes to become the skeletons in our closet that we prefer not to think about too much. This was certainly my experience.

CSS is undoubtedly powerful, but it's too powerful. It encourages you to do things that seem efficient and clever at the time but eventually turn in to absolute maintenance nightmares.

One night I couldn't sleep, I was thinking about the new redesign and how many things would start to break or have to be hacked around to do the new CSS. I realized that I would probably have to completely start again with the CSS on the page. But how should I structure it so that this wouldn't happen again?

I got reading on the internets, trying to find better ways to do it - preprocessors, frameworks, etc. I'd used SASS/SCSS in the past, and while the nesting functions were nice, it was still far too easy to make a mess. I came across Stubbornella's Object Oriented CSS project. I really liked some of the ideas and concepts. Things like writing for reuse and avoiding specificity. For me OOCSS it wasn't the answer though, it just didn't click for me, so I started to think about how I could twist CSS to be less unwieldy.

I wanted to be able to define objects, but not have to worry about where those objects were on the page. I wanted those objects to have multiple elements but not have those styles spill into other objects. I wanted to be able to add classes to objects as tags/flags - only applying if the object were a particular type. I wanted to be able to create mixins that could be applied to multiple elements, but not used on their own. CSS can do all of these things fairly easy, but it just doesn't encourage it.

So this was the point I realized I was going to have to come up with my own CSS subset that forced these things, but made them far easier to do, and much more manageable/readable. One of my design goals was to make the class attributes in the HTML very easy to understand, using the single class field for assigning object type, meta data flags, and mixins.

Example

Here's some HTML we want to style:

<html>
  <head>
    <title>HTML5 Rules, but css is still just css...</title>
  </head>
  <body>
    <aside class="Sidebar -mini">
      <header></header>
      <section></section>
      <footer></footer>
    </aside>

    <article class="Page -wide -editable -post">

      <header>
        <h1>Post Title</h1>
        <p>Subtitle</p>
      </header>

      <nav></nav>
      <section>
        <header></header>
      </section>
    </article>

  </body>
</html>

And some MCSS to do the styling:

  Sidebar {
    header {
      font-weight: bold
      color: white
      background: #363
    }
    section {
      header {

      }
      footer {

      }
    }
    footer {

    }
  }

  Page {
    header {

    }
    nav {

    }
    section {

    }
    footer {

    }
  }

  Comment {

  }

It's almost a schema for your HTML

You'll notice that MCSS provides an easy way to view an overall structure of your page. In fact I almost always write the MCSS first to figure out how the page will be laid out then write the HTML to match.

Installation

$ npm install micro-css -g

Usage

When installed globally execute:

$ mcss filepaths... -o outfile.css

Or it can be used by API in Node.js:

var microCss = require('micro-css')
var finalCss = microCss("Item { color: red } body { font: 80% sans-serif }")  // read from file or hardcoded like this

Features

Optional Semicolons

Because semicolons always annoyed me...

Object classes start with uppercase

The following MCSS:

Item {
  border: 1px solid gray;
  background: silver;
}

Becomes:

.Item {
  border: 1px solid gray;
  background: silver;
}

Good old fashioned element selectors are there - just like normal css

As long as it starts with a lower case letter... otherwise it'll see it as an Object class.

Nested Rules always use >

Item {
  h1 {
    font-weight: normal
  }
  p {
    margin: 4px 0px
  }
}

Becomes:

.Item > h1 {
  font-weight: normal
}
.Item > p {
  margin: 4px 0px
}

Makes it not so IE6 friendly, but it's so worth it (then again IE6 doesn't even support multiple classes!)

If you really have to, you can still opt-out of '>'

Item {
  (strong) {
    font-weight: bold
    color: #333
  }
}

Becomes:

.Item strong {
  font-weight: bold;
  color: #333;
}

Add flags to specific types of objects

Item {
  color: black
  -special {
    color: red
  }
}
AnotherItem {
  color: black
}

Becomes:

.Item {
  color: black;
}
.Item.-special {
  color: red;
}
.AnotherItem {
  color: black;
}
<div class='Item'>
  back text
</div>
<div class='Item -special'>
  red text
</div>
<div class='AnotherItem -special'>
  still black text as '-special' is not defined for 'AnotherItem'
</div>

So I can use the -special flag wherever I like and not worry about stepping on another namespace.

Specify multiple possibilities [OR]...

Item {
  -unknown, -disabled{
    color:gray
  }
  -disabled {
    opacity:0.5
  }
}
h1, h2, h3, h4 {
  font-weight: normal
}

Becomes:

.Item.-unknown {
  color: gray;
}
.Item.-disabled {
  color: gray;
  opacity: 0.5;
}
h1, h2, h3, h4 { /* this one is left unchanged - one of the few parts that work exactly like standard css */
  font-weight: normal;
}

... or multiple requirements [AND]

Listing {
  -featured {
    h1 {
      color: orange
    }
  }
  -sold {
    h1 {
      color: red
    }
  }
  -featured -sold {
    h1 {
      color: green
    }
    opacity: 0.5
  }
}

Becomes:

.Listing.-featured > h1{
  color: orange;
}
.Listing.-sold > h1{
  color: red;
}
.Listing.-featured.-sold > h1{
  color: green;
}
.Listing.-featured.-sold{
  opacity: 0.5;
}
<div class='Listing -featured'>
  <h1>This text will be orange</h1>
</div>
<div class='Listing -sold'>
  <h1>This text will be red</h1>
</div>
<div class='Listing -sold -featured'>
  <h1>This text will be green</h1>
  And this div will be transparent
</div>

Mixins for reusing a particular style... when Object classes aren't enough

A way to reuse styles in multiple places.

$fancyThing {
  box-shadow: 10px 10px silver
  div {
    font-size: 90%
  }
}

Item {
  $fancyThing

  border: solid 1px gray
  background-color: fuchsia
}

Becomes:

.Item {
  border: solid 1px gray
  background-color: fuchsia
}
.Item {
  box-shadow: 10px 10px silver;
}
.Item > div {
  font-size: 90%;
}

Element classes - basically how most people currently use classes

Except severely limited so you can't hurt yourself.

Item {
  color: black
  div.main {
    font-weight:bold
  }
  div.extra {
    color: gray
  }
}

Becomes

.Item {
  color: black;
}
.Item > div.main {
  font-weight:bold
}
.Item > div.extra {
  color: gray
}

And we can use it like this in our HTML:

<div class='Item'>
  <div class='main'>
    I am some main text
  </div>
  <div>
    I am a standard div
  </div>
  <div class='extra'>
    I am an extra div
  </div>
</div>

They can only be used with an element selector, and never on their own. And generally should be avoided if they have a better pure element alternative.

Inline SVG

@svg test {
  width: 20px
  height: 20px
  content: "<path d='M0,0 L20,20' />"

  path {
    stroke: #CCC
    stroke-width: 3
    fill: none
  }
}

Item {
  background-image: svg(test)
}

Becomes

Item {
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bW...)
}

The svg is automatically inlined as a data url.

CSS Entities

@keyframes animationName {
  from { background-color: red }
  50% { background-color: green }
  to { background-color: blue }
}

Becomes

@keyframes animationName {
  from { background-color: red; }
  50% { background-color: green; }
  to { background-color: blue; }
}

License

MIT