remove-style

KO | EN

gitlite — search

#react #ai #llm #machine-learning #linux #docker #nodejs #macos #cli #security #pytorch #ios #mcp #open-source

(★ 12)

Remove inline styles from html files

remove-style 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# remove-style
Remove inline styles from html files

## Why Remove Inline Styles 
Inlining styles in HTML is an easy way to style HTML elements but not a good practice 
especially, if there are other better approaches like using a separate CSS file or 
styling inside the HTML style tag. Have you ever tried changing the theme of your 
website after inlining your styles in the HTML code?

- Inline styling makes code maintainability very difficult.
- Inline styling does not allow reusing style rules for different elements.
- It also increases the size of the HTML file which makes page loading very slow.
- It also doesn't make you enjoy the benefits of caching by the browser.
- and many more... Read these articles to get more insight about inline styling:    
    - [Why is inline styling bad](https://www.lostsaloon.com/technology/why-is-inline-css-bad-is-it-really-that-bad/)
    - [Avoid using inline css styles](https://dev.to/alim1496/avoid-using-inline-css-styles-5b6p)

## Why You May Choose Remove-Style Package 
Below examples demonstrates why you should use remove-style

File1.html
```html
    
    <div style="color:red;font-size:10px" class="classname1 classname2">My first text content</div>
    <div>My second text content</div>
    <div style="color:red;font-size:20px" class="classname1">My third text content</div>
    <div style="color:blue;font-size:10px">My fourth text content</div> 
```
File2.html
```html
    
    <div style="font-size:10px" class="classname1 classname2">My first text content</div>
    <div style="color:blue;" class="classname1">My second text content</div> 
```

**After using remove-style**

File1.html
```html
    
    <div class="classname1 classname2 rs-a rs-b">My first text content</div>
    <div> My second text content</div>
    <div class="classname1 rs-a rs-c">My third text content</div>
    <div class="rs-d rs-b">My fourth text content</div>  
```
File2.html
```html
    
    <div class="classname1 classname2 rs-b">My first text content</div>
    <div class="classname1 rs-d">My second text content</div>  
```

**CSS generated by remove-style**

```css
    /* Remove-Style generated css */
    .rs-a{
        color:red;
    }
    .rs-b{
        font-size:10px;
    }
    .rs-c{
        font-size:20px;
    }
    .rs-d{
        color:blue;
    }
```

### What Does Remove-Style Gives You
- Small file size for both HTML and CSS
- No inline styling in your production files
- Style rules usability. Remove-Style ensures every CSS rule is set once throughout your HTML files.
- No switching forth and back from CSS files to HTML files. It allows you to inline all the style rules you want 
  in the HTML file then, it takes care of removing them for you.

## How To Use
First install Remove-Style from NPM. 
```
npm install remove-style
```

### Usage 1 - Passing HTML strings as argument
You can pass HTML strings as argument to Remove-Style to remove inline styles. In that case,
Remove-Style returns the removed styles' HTML strings and the CSS string.

```js
    var rs = require("remove-style");
    var result = rs({
        
        //Put all your HTML strings here
        htmlStrings:["your first html string","your second html string","your third html string"]
    });

console.log(result.htmlOutputs);//["your first html string","your second html string","your third html string"]
    console.log(result.styleSheet);//CSS string generated by Remove-Style

```

### Usage 2 - Passing files or a directory as argument
You can pass files or a directory as argument to Remove-Style to remove inline styles from all those files 
or all the files in the directory.
Stylesheet is always generated once (universal) for all the files. This ensures each style rule can
be reused by other files. 
In the case that you want to pass files or a directory as argument:
- You have to set the CSS destination where the final style sheet should be written to.
  If a CSS destination is not set then, the stylesheet will be returned. 
- You have to choose whether the files you provide should be overwritten with the removed styles' HTML.
  By default, Remove-Styles will overwrite the files you provide with the removed styles' HTML. Set 
  `overWriteFiles` to false to prevent that behaviour. If `overWriteFiles` is set to false then, 
  Remove-Style returns the removed styles' HTML strings.

**With files as argument**
```js
    var rs = require("remove-style");
    var result = rs({

//Put the path to all your HTML files here
        filePaths:["filename1", "filename2", "filename13"],

//Choose whether to overwrite files or not
        overWriteFiles:false||true||undefined,

//Set a the style sheet destination or ignore to get it as string
        cssDestination:"path to style sheet destination"||undefined
    });

console.log(result.htmlOutputs);//["filename1 html string","filename2 html string","filename3 html string"]||[]
    console.log(result.styleSheet);//CSS string generated by Remove-Style or empty string ""

```

**With a directory as argument**
```js
    var rs = require("remove-style");
    var result = rs({

//Place your directory path here
        dirPath:"directory path",

//Choose whether to overwrite files or not
        overWriteFiles:false||true||undefined,

//Set a the style sheet destination or ignore to get it as string
        cssDestination:"path to style sheet destination"||undefined
    });

console.log(result.htmlOutputs);//["filename1 html string","filename2 html string","filename3 html string"]||[]
    console.log(result.styleSheet);//CSS string generated by Remove-Style or empty string ""
    
```

### Order of preference
In the case when all arguments are given together, HTML strings takes the higher preference.
A directory takes the lowest preference if passed as argument with any other possible argument.

### A Note On the "rs-" Prefix
In order to prevent class names collision with existing class names, Remove-Style prefix
class names with "rs-".

### A Note On the Class Names Used by Remove-Style
Remove-Style can produce over 13 million distinct or unique class names.
You can do the maths:
- 62 Permutation 4 
- 62 Permutation 3
- 62 Permutation 2
- 62 Permutation 1

That is to say; Remove-Style produces the class names from 62 characters, alpha-numerals 
(both lowercase and uppercase).
Class names are generated starting from single characters to maximum of 4 characters (excludeing the "rs-" prefix).
So in the worst case, 7 characters is used for each class name.

## [MIT Lincensed](https://github.com/KBismark/remove-style/blob/master/LICENSE)

remove-style

remove-style 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

remove-style

remove-style 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README