{"id":21469292,"url":"https://github.com/kbismark/remove-style","last_synced_at":"2025-06-23T18:06:33.054Z","repository":{"id":60075836,"uuid":"540856068","full_name":"KBismark/remove-style","owner":"KBismark","description":"Remove inline styles from html files","archived":false,"fork":false,"pushed_at":"2022-09-24T18:30:01.000Z","size":12,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-23T18:06:26.381Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KBismark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-24T14:27:39.000Z","updated_at":"2023-06-02T21:35:40.000Z","dependencies_parsed_at":"2022-09-25T19:36:30.129Z","dependency_job_id":null,"html_url":"https://github.com/KBismark/remove-style","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KBismark/remove-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fremove-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fremove-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fremove-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fremove-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KBismark","download_url":"https://codeload.github.com/KBismark/remove-style/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fremove-style/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261528658,"owners_count":23172751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-23T09:15:03.951Z","updated_at":"2025-06-23T18:06:33.018Z","avatar_url":"https://github.com/KBismark.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# remove-style\nRemove inline styles from html files\n\n## Why Remove Inline Styles \nInlining styles in HTML is an easy way to style HTML elements but not a good practice \nespecially, if there are other better approaches like using a separate CSS file or \nstyling inside the HTML style tag. Have you ever tried changing the theme of your \nwebsite after inlining your styles in the HTML code?   \n\n- Inline styling makes code maintainability very difficult.\n- Inline styling does not allow reusing style rules for different elements.\n- It also increases the size of the HTML file which makes page loading very slow.\n- It also doesn't make you enjoy the benefits of caching by the browser.\n- and many more... Read these articles to get more insight about inline styling:    \n    - [Why is inline styling bad](https://www.lostsaloon.com/technology/why-is-inline-css-bad-is-it-really-that-bad/)\n    - [Avoid using inline css styles](https://dev.to/alim1496/avoid-using-inline-css-styles-5b6p)    \n\n## Why You May Choose Remove-Style Package \nBelow examples demonstrates why you should use remove-style  \n\nFile1.html\n```html\n    \u003c!-- HTML with inline styling --\u003e\n    \u003cdiv style=\"color:red;font-size:10px\" class=\"classname1 classname2\"\u003eMy first text content\u003c/div\u003e\n    \u003cdiv\u003eMy second text content\u003c/div\u003e\n    \u003cdiv style=\"color:red;font-size:20px\" class=\"classname1\"\u003eMy third text content\u003c/div\u003e\n    \u003cdiv style=\"color:blue;font-size:10px\"\u003eMy fourth text content\u003c/div\u003e \n```\nFile2.html\n```html\n    \u003c!-- HTML with inline styling --\u003e\n    \u003cdiv style=\"font-size:10px\" class=\"classname1 classname2\"\u003eMy first text content\u003c/div\u003e\n    \u003cdiv style=\"color:blue;\" class=\"classname1\"\u003eMy second text content\u003c/div\u003e \n```\n\n**After using remove-style** \n\nFile1.html\n```html\n    \u003c!-- HTML after using remove-style --\u003e\n    \u003cdiv class=\"classname1 classname2 rs-a rs-b\"\u003eMy first text content\u003c/div\u003e\n    \u003cdiv\u003e My second text content\u003c/div\u003e\n    \u003cdiv class=\"classname1 rs-a rs-c\"\u003eMy third text content\u003c/div\u003e\n    \u003cdiv class=\"rs-d rs-b\"\u003eMy fourth text content\u003c/div\u003e  \n```\nFile2.html\n```html\n    \u003c!-- HTML after using remove-style --\u003e\n    \u003cdiv class=\"classname1 classname2 rs-b\"\u003eMy first text content\u003c/div\u003e\n    \u003cdiv class=\"classname1 rs-d\"\u003eMy second text content\u003c/div\u003e  \n```\n\n**CSS generated by remove-style**\n\n```css\n    /* Remove-Style generated css */\n    .rs-a{\n        color:red;\n    }\n    .rs-b{\n        font-size:10px;\n    }\n    .rs-c{\n        font-size:20px;\n    }\n    .rs-d{\n        color:blue;\n    }\n```\n\n### What Does Remove-Style Gives You\n- Small file size for both HTML and CSS\n- No inline styling in your production files\n- Style rules usability. Remove-Style ensures every CSS rule is set once throughout your HTML files.\n- No switching forth and back from CSS files to HTML files. It allows you to inline all the style rules you want \n  in the HTML file then, it takes care of removing them for you.\n\n\n## How To Use\nFirst install Remove-Style from NPM. \n```\nnpm install remove-style\n```\n\n### Usage 1 - Passing HTML strings as argument\nYou can pass HTML strings as argument to Remove-Style to remove inline styles. In that case,\nRemove-Style returns the removed styles' HTML strings and the CSS string.\n\n```js\n    var rs = require(\"remove-style\");\n    var result = rs({\n        \n        //Put all your HTML strings here\n        htmlStrings:[\"your first html string\",\"your second html string\",\"your third html string\"]\n    });\n\n    console.log(result.htmlOutputs);//[\"your first html string\",\"your second html string\",\"your third html string\"]\n    console.log(result.styleSheet);//CSS string generated by Remove-Style\n\n```\n\n### Usage 2 - Passing files or a directory as argument\nYou can pass files or a directory as argument to Remove-Style to remove inline styles from all those files \nor all the files in the directory.\nStylesheet is always generated once (universal) for all the files. This ensures each style rule can\nbe reused by other files. \nIn the case that you want to pass files or a directory as argument:\n- You have to set the CSS destination where the final style sheet should be written to.\n  If a CSS destination is not set then, the stylesheet will be returned. \n- You have to choose whether the files you provide should be overwritten with the removed styles' HTML.\n  By default, Remove-Styles will overwrite the files you provide with the removed styles' HTML. Set \n  `overWriteFiles` to false to prevent that behaviour. If `overWriteFiles` is set to false then, \n  Remove-Style returns the removed styles' HTML strings. \n\n**With files as argument**\n```js\n    var rs = require(\"remove-style\");\n    var result = rs({\n\n        //Put the path to all your HTML files here\n        filePaths:[\"filename1\", \"filename2\", \"filename13\"],\n\n        //Choose whether to overwrite files or not\n        overWriteFiles:false||true||undefined,\n\n        //Set a the style sheet destination or ignore to get it as string\n        cssDestination:\"path to style sheet destination\"||undefined\n    });\n\n    console.log(result.htmlOutputs);//[\"filename1 html string\",\"filename2 html string\",\"filename3 html string\"]||[]\n    console.log(result.styleSheet);//CSS string generated by Remove-Style or empty string \"\"\n\n```\n\n\n**With a directory as argument**\n```js\n    var rs = require(\"remove-style\");\n    var result = rs({\n\n        //Place your directory path here\n        dirPath:\"directory path\",\n\n        //Choose whether to overwrite files or not\n        overWriteFiles:false||true||undefined,\n\n        //Set a the style sheet destination or ignore to get it as string\n        cssDestination:\"path to style sheet destination\"||undefined\n    });\n\n    console.log(result.htmlOutputs);//[\"filename1 html string\",\"filename2 html string\",\"filename3 html string\"]||[]\n    console.log(result.styleSheet);//CSS string generated by Remove-Style or empty string \"\"\n    \n```\n\n### Order of preference\nIn the case when all arguments are given together, HTML strings takes the higher preference.\nA directory takes the lowest preference if passed as argument with any other possible argument.\n\n### A Note On the \"rs-\" Prefix\nIn order to prevent class names collision with existing class names, Remove-Style prefix\nclass names with \"rs-\".\n\n### A Note On the Class Names Used by Remove-Style\nRemove-Style can produce over 13 million distinct or unique class names.\nYou can do the maths:\n- 62 Permutation 4 \n- 62 Permutation 3\n- 62 Permutation 2\n- 62 Permutation 1     \n\nThat is to say; Remove-Style produces the class names from 62 characters, alpha-numerals \n(both lowercase and uppercase).\nClass names are generated starting from single characters to maximum of 4 characters (excludeing the \"rs-\" prefix).\nSo in the worst case, 7 characters is used for each class name.    \n\n## [MIT Lincensed](https://github.com/KBismark/remove-style/blob/master/LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbismark%2Fremove-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkbismark%2Fremove-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbismark%2Fremove-style/lists"}