# simple-css-in-js

> A 200 bytes Vanilla JS Library allows you to Write Styles in JS Without any Hassle. Hooks Into The HTMLElement Prototype allows you to edit all HTML Elements inside Your DOM With a Much Cleaner Syntax.

Latest version **1.1.2** (published 2022-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-css-in-js
pnpm add simple-css-in-js
yarn add simple-css-in-js
bun add simple-css-in-js
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2022-07-12 |
| First published | 2022-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Abdul Rafay |
| Maintainers | rafayrty |
| Keywords | css-in-js, js-styling, css, typescript |

## Links

- npm: https://www.npmjs.com/package/simple-css-in-js
- Repository: https://github.com/rafayrty/simple-css-in-js
- Homepage: https://github.com/rafayrty/simple-css-in-js.git
- Issues: https://github.com/rafayrty/simple-css-in-js/issues
- npm.io page: https://npm.io/package/simple-css-in-js

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2022-07-12
- 1.1.1 — 2022-07-12
- 1.1.0 — 2022-07-12
- 1.0.2 — 2022-07-12
- 1.0.1 — 2022-07-12
- 1.0.0 — 2022-07-11

## README

# Simple CSS In JS

A 200 bytes Vanilla JS Library allows you to Write Styles in JS Without any Hassle. Hooks Into The HTMLElement Prototype allows you to edit all HTML Elements inside Your DOM With a Much Cleaner Syntax.

## Why Use Simple CSS In Js?
```javascript

//Write This 
let h1 = document.querySelector('h1');
h1.styles({fontSize:"4rem",color:"red"});

//Instead Of This
let h1 = document.querySelector('h1');
h1.style.fontSize = "4rem";
h1.style.color = "red";

```

## Installation

Use npm to install the package.

```bash
npm i simple-css-in-js
```

## Usage

```javascript
import SimpleCSS from "simple-css-in-js";

// Initialise The Plugin
SimpleCSS();

// Now Write This
let h1 = document.querySelector('h1');
h1.styles({fontSize:"2rem",color:"black"});

```
### Global Styling
```javascript
import SimpleCSS from "simple-css-in-js";

//Add The Style Object Directly Inside The Initialization 
SimpleCSS({
 margin:0,
 padding:0
})
// Works Similar to CSS * Selector


```

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.


## License
[MIT](https://choosealicense.com/licenses/MIT/)

---
_Source: https://npm.io/package/simple-css-in-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._