Readme
bssA simpler way to do CSS in Javascript directly on the elements you're styling.
bss allows you to write your styles directly on the element where they matter using plenty of fun constructors.
Any group of definitions are resolved once one of the following properties are accessed / called
.style Returns a Javascript style object .class Returns a class name.valueOf() or '' + returns '.' + b.classUsing npm
npm install bss -S
Require from CDN
<script src="https://unpkg.com/bss"></script>
Or download and include - download bss.js
Here's a quick example of using bss together with mithril - see the example live here
// Some js file
import b from 'bss'
import m from 'mithril'
let on = true
m.mount(document.body, {
view: vnode => m('h1' + b.bc('red').c('white').fs(32).ta('center'), {
style: b.bc(on && 'green').style,
onclick: () => on = !on
}, 'Hello world')
})
Creates the following in the dom, which toggles the style attribute on click.
<style>
.bdp4f3o1 {
background-color: red;
color: white;
font-size: 32px;
}
</style>
<body>
<h1 class="bdp4f3o1" style="background:green;">Hello world</h1>
</body>
In the spirit of Javscript - bss Allows you to write the same thing in many different ways.
b`
background-color: black;
text-align: center;
`
.$hover(`
background-color: red;
`)
b`
background-color black
text-align center
`
.$hover`
background-color red
`
b({
backgroundColor: 'black',
textAlign: 'center',
':hover': {
backgroundColor: 'red'
}
})
b.backgroundColor('black')
.textAlign('center')
.$hover(
b.backgroundColor('red')
)
.classThe .class getter closes the current style description, creates a class name, adds the styles to a stylesheet in <head> and returns the class name
b.textAlign('center').class // Returns eg. bdp4f3o1
.styleThe .style getter also closes the current style description and return a JS object with the styles
b.textAlign('center').style // Returns { textAlign: 'center' }
valueOf().valueOf() will be called if b is used like 'div' + b because javascript casts automatically using .valueOf().
Casting b to a string will call .class and prepend a period for easy use in vdom libraries.
'div' + b.textAlign('center') // Returns eg. div.bdp4f3o1
You can also override .valueOf if you set classNames instead of selectors
b.valueOf = function() { return this.class + ' ' }
`<div class="${ b.textAlign('center') }`"></div>` // Returns eg. <div class="bdp4f3o1"></div>
Short property names can also be used and are the acronyms of full css properties with collisions handpicked by popularity
b.bc('black')
.ta('center')
.$hover(
b.bc('red')
)
.helperDefine your own helpers to work in a fashion similar to tachyons, or simply to make your life easier.
Tachyon style helpers
b.f1.p1 // { font-size: '3rem'; padding: '0.25rem'; }
// Created like this:
b.helper('f1', b.fontSize('3rem'))
b.helper('p1', b.padding('0.25rem'))
// Or like this:
b.helper({
f1: b.fontSize('3rem'),
p1: b.padding('0.25rem')
})
Helpers can also take values like this:
b.size('100%').align('center') // Fills an element in it's parent and centers all children on both axes.
// Created like this:
b.helper('size', (width, height) =>
b.width(width).height(height || width)
)
b.helper('align', (x, y) =>
b.display('flex').justifyContent(x).alignItems(y || x)
)
They can even be easy to use media query groupers like this:
b.desktop(
b.fontSize(128)
)
// Equally valid is
b.desktop(`
fs 128
`)
// Created like this:
b.helper('desktop', style => b.$media('(min-width:801px)', style))
Helpers can be called in a couple different ways:
b.helper('size', (width, height) =>
b.width(width).height(height || width)
)
// Can be invoked by css/lean strings:
b`
color green // you can mix in normal styles
size 50 100
`
// Or functions:
b.color('green').size(50, 100)
When invoking a helper through a css/lean string arguments are converted to strings, whereas functions can accept object arguments.
Properties accepting pixel values will automatically have px added if a number type is passed.
b.fontSize(32) // font-size: 32px;
b.width(200) // width: 200px;
.$hover :pseudo selectorsAll of the different css pseudo selectors normally used with a colon : is added with the dollor $ for ease of use in js.
b(`
color: red;
`).$hover(`
color: blue;
`)
b.color('red').$hover(b.color('blue'))
.$nest nested selectorsTargeting nested children is sometimes useful, and is done by using $nest and supplying the first argument with a regular child css selector, and then supply styling as the second argument for that selector.
b.color('red').$nest('li', b.color('blue'))
b.color('red').$nest(':hover li', b.color('blue'))
b.color('red').$nest('> &', b.margin(10))
& is a placeholder for the generated class like in sass/less.
Once you use & in $nest you take full responsibility of adding the generated class in the correct places to avoid creating global selectors.
One case where this could happen is if using the comma seperator to make multiple selectores, like doing $nest('th &, tr', ...). This would create a global tr style. To do this right the code would need to be $nest('th &, tr &, ...).
Normally bss handles this for you such that $nest('th, tr', ...) will be scoped locally, but using & overrides this behavior.
.$media @media queriesb.color('red').$media('(max-width: 600px)', b.color('blue'))
.$keyframes @keyframesAnimation in CSS is usually a mixture of transition and animation / @keyframes. Transition is handled as usual css properties by bss, but @keyframes are a bit different.
Creating a keyframe animation is done using b.$keyframes and will return a generated name for the animation specified.
const fadeIn = b.$keyframes({
from: b.o(0).style,
to: b.o(1).style
})
// To use the animation do:
b.animation(fadeIn + ' 1s')
.$animateOften it might not be necessary to consider the animation name so a built in helper method called $animate comes in handy. It takes a regular animation shorthand value as the first argument, excluding the animation name. The second parameter is the animation definition itself.
b.$animate('1s linear', {
from: b.o(0).style,
to: b.o(1).style
})
.cssA way to add regular css properties to a selector and prepend to the generated stylesheet
b.css('html', b.boxSizing('border-box'))
b.css('*, *:before, *:after', b.boxSizing('inherit'))
.setDebugSince chrome dev tools doesn't allow changing styles applied using CSSOM you can activate debugging mode which doesn't apply the styles using CSSOM.
b.setDebug(true)
The only caveat here is that animations and applied styles can result in small quicks like blinking fonts and styles.
To enhance developer expectations bss uses double class names for regular definitions to give higher specificity than nested items, which might have rules added from regular css, or from $nest. To support this $nest will not increase specificity by only adding the class name once.
bss is tested and works in ie9+ and the other major browsers.
TODO - Create browser support table
When using bss in the browser it automatically adds only the necessary prefixes, so you can go ahead and use the raw property and expect it to work in browsers that only has the prefixed version.
Prefixes for css property values like linear-gradient are not supported yet, so if you want to support older browsers you'll need to add them manually like
b`
background -webkit-linear-gradient(45deg, red, blue)
background -moz-linear-gradient(45deg, red, blue)
background linear-gradient(45deg, red, blue)
...etc
`
TODO - If using it on the server you can specify the prefixes that you'd like to be generated when generating the css.
FAQs
Better Style Sheets
The npm package bss receives a total of 81 weekly downloads. As such, bss popularity was classified as not popular.
We found that bss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.