An open API service indexing awesome lists of open source software.

https://github.com/stephanhoyer/yss

why style sheets?
https://github.com/stephanhoyer/yss

css-in-js javascript stylesheets

Last synced: 9 months ago
JSON representation

why style sheets?

Awesome Lists containing this project

README

          

# yss - why style sheets?

![](http://img.badgesize.io/StephanHoyer/yss/master/yss.min.js.svg?compression=gzip)

[example](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgCsEAaEAYwHs0AXGWvAekYAJyAnGDOljNFiGjg1M5GAB00VITRYBPOHBYBeFgE1FACgCUkycxZxKOFgAsYUAA4x2LMBnI1K7OZLABXKTQjVe7pwCqaBA0mpbslNbsNHIkdhhQUABGDgDWQSEqLADknFjZ2izAkiwsnDTu7PyasSwAbgnuMHGemar2iSnk6cE0hcoAfPIABgAkwOGRNjEAvizjDVBNM+OtNDPDkjN6aAYAJjCQaDCGxic0DqZy1EpQEKkn5lY2cJIKcPhPUZrF-CxJaEQOSSzgOtjQ1Bg2RIO1KBjA1FkwjksBKAiB2QRtAAyjFYAILndyNC0UkMViaAB1GAQADmplkIKgexJf08YLuxwxdAAHjQACIwKjsbg+fjsmycqEwv7Cdj3GDcmB8wXC0W+KUAWhopgi7nprNKNBo5CVfIAKiKhAj2Fg2BhLCEEhAAF7StHG9xmmiWvhwG129yWKLkDBwd1oNHwxGGV0SP5gOBAjD+SgZUKYxHYuMFGWlRMARiBchUQzk+ETmgAzNo83Y4AAmYul+QVuCaBv4BsAVlraMTVebg1blYL+F7dcTABYh2W25oxz2+wm4N3ZyP2wXl-m4AA2dflysABnwAA4AOwT2EsAwg9hgsoYPYQdyvP5JdjJ1PpzTZO9ggAlJ8XzgXNSXYI8D3wD9NCPbd-nYIt5BbcsYILG8WCneCPybZDh1Q9gFwwhtsPYQc8LnNCMK3OsPxnCjWxghtqNI81Igxf8bAAIUoY1jAAGUOGggOfV9ECPABuTj2B4visAAukGREkDxMNBDBLAGgONBGw2MsBT6WE4CxMk6TZKceTFKM0SkyPNSPwMhltPvXTIg06yVNMnSZN4iz3OUkz7J8uTnLBPT-OM2ypO8vTHI8wLaPYAAFaAoCgtCj0y5co1YSwn2fNBaTRSw0r8QJel-PK9gK2l3LAv4SsghjyxK2D4JKpCS3w-BWvQ1gsLrErcK6udeuI9qoHIkbWzG1gaOKqB6OmlqoA7FjBs-Mq0wq7IqpquL6tKcImuWnrCLgjbOpQs6iP69r2GG67wlulgSI2qansIvqWHmhr2CWz61rm9qtK2n9dvywRaT0w6WEsGgTqe0ILuKmgru6+GXoG1HHox0Jvre1GPrxl7fqOmgAZJ5jgcGskwZ2vaofM4xYcsJJEYxpI2tp9HRq577sYapJcb5l7CaF4nRe+sm4aSSnRepn72rqDnRoRnr2cGupeZmtGNYLLWRd1zs2YbLXJd1qsNarLX5d1qcNanQbTFVmaoBPY7nZ1lax3CA3itMI2VpNh7nYtlarfCG2A7tlaHfCJ3r32CAcCEMU31KAB3L9ypCX9M4gPYdVh0wc+2vPsnMKzYbgOMgRqOJFiaFpen6OdM80JvmhYNZtE+TvGm73uZRylgsAgOByFJWl69qKgoGcNv5F-LpUlpPU0BZOJ58XutTRYBu2EoBf2CXuRfx39hoSPk-lxmXRI12VgsGcR4LCiN93k+d+bB+NFTEoHUGw-IMDsAeICZqnxAG-z-GkdelB2TX2yHsUBqRsgsAANStmRLAaCcCN57HgmAWAPJZ5xGdLSNAABJOgWAlCqGyGIWgNhr6EFfN4MAcgADCiJ6CyAYUwugV8l6-FKKUOQwxnxwBKhgEsxDlTDB+LwO4lCaEwDoXENhwgICcJ4cw2gLB75ohmDKIxj8DB8F4KcHAmdTDcDHq-I+WASrKjMD-dgbxFDf2eIRNEf5-BODQGpQ+q94HsjPpsP4+YSFolKACWJCEUqJASZ6BJEAEmFgSZYOoVYsmmCnAky+LBbEhHjGIlgNArS128L4UJBCWAngbEoLg4ZNSCE1AgmgCS6kIM3vMYAPT2TbD+MMCslByCvmGJ0qUQIITHFGQAoB7AQFgPoJIB++hWAHCOCcIwJg+Ap3VEISQ0hhCPkECCTOWRRE5CPAAUmyMWLxSRaS-nXjAegsNshVnuY8+QzzXl-iWFCeC2Rdy-KeR8F5v5OAslBQWTKDzIXQUBe8z5d8dinMZJnAAgsELARzrl+Ihf8qFgKkhQDSF87sJKv7QuyCUugXyEW0oBSvSl3R6rDM2WwTg3BdlnEMHiGAewnGWEhLQN8WL-jAq4gE3wDCkjyqCZg0lwwlV8X4BSpokTpVorQHKzVWR-GavQVg946rlUsH1bqm4sg7hnIYe4KAZrSX4GOMIX8dxr5f3IG8zg6KoFLJqF4v1uQRUFG0A-aVnBpE3AgEA-kCaVB+OfHUM1aJ3gJPwLXN0mhezZvpbCgo2acDPgwL+TQBKeSagLkXUuP1MpHksDybQPq2XZH1ZGk5dr-iZyTXUFNfxkEJozX8L+uaYD5r7gcgldBfwIqUIII4pTr5JFxfio52hhiVL9CEMU-x8G9NFQWOAtqZAsCkVQAdQ7SgjvTaqidcZp34Fnfy38ABOJdaAV1MriCKC5lBM7bt3WnGpWqj3sh+mentF6+C8XMMsie17k3KFTaOx9XjJ0vrffO7Ii6BA-sEKu-9GBAPAZ3VU-dtTIN9NPZEnlr4TgJCgBU8wbGoZviwPgF+nhQh7HGe4VONBoKUD2LUG51AgSVObmiOoEAYAd2AEK-lhjCg3NKOUSo-BkAJNKFgX8ODpRuvIIoeC5SDN6bEcIfl+BfAAH5rUBoNVaoE2qYCGsCXWcppQNM+dKNQcgRJUj1yXpoGzdA7P8FUAAQgizAKL5mfMmKs3eoLEBug4GyFZpL+nNAOpoHEAz2RvVxGyHsk4BXI3ebEQZ2N4q06JoTblsemgr2UAHS1gz67Os1by-BnUwDkMdeazVgAusY0xD8QBkHDLARw6c8AIsHOeEAMwxtkE5KkBAKB0DYFwIgEA48dTyigDNkAlQzuHYZDQSwSZmCeEsGvfAVAsCMGO7qaAAABMcY5dzvZCJ9qARBSAgBiNYPAk95TwzWyQPbOA8DvHO5dvAN27uIAe2gJ7tIXvGEYO8L7J4rZHnx148eaAQfnfBwdkAUOIAw-W2QTACPDvvBYJqFgypsAuLW0AA)

## What is _yss_?

Given that you use the mighty [mithril.js](https://mithril.js.org) you can do something like this:

```
const myLink = 'a' + yss.fsL.dIb.bgBlue.fgWhite.brPill.boNone.hoGrow.ulNone
m(myLink, { href: '#' }, 'Click me')
```

## Credits

Heavily inspired by https://github.com/porsager/bss. Thanks Rasmus!