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
  • Avoid using inline css styles

Why You May Choose Remove-Style Package

Below examples demonstrates why you should use remove-style

File1.html

    <!-- HTML with inline styling -->
    <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 with inline styling -->
    <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 after using remove-style -->
    <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 after using remove-style -->
    <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

    /* 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.

    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

    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

    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