Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Remove inline styles from html files
License
KBismark/remove-style
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Remove inline styles from html files
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
div style pl-s">color:red;font-size:10px" class pl-s">classname1 classname2">My first text contentdiv> div>My second text contentdiv> div style pl-s">color:red;font-size:20px" class pl-s">classname1">My third text contentdiv> div style pl-s">color:blue;font-size:10px">My fourth text contentdiv>
div style pl-s">font-size:10px" class pl-s">classname1 classname2">My first text contentdiv> div style pl-s">color:blue;" class pl-s">classname1">My second text contentdiv>
After using remove-style
div class pl-s">classname1 classname2 rs-a rs-b">My first text contentdiv> div> My second text contentdiv> div class pl-s">classname1 rs-a rs-c">My third text contentdiv> div class pl-s">rs-d rs-b">My fourth text contentdiv>div class pl-s">classname1 classname2 rs-b">My first text contentdiv> div class pl-s">classname1 rs-d">My second text contentdiv>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.
First install Remove-Style from NPM.
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 ""
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.
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.
Remove Inline Styles
Note: Selecting all elements in the page via a wildcard query could be slow, depending on how many elements are in the page. You could use a smaller set of elements to be more performant:
var set = document.getElementById('foo').getElementsByTagName('bar'); remove_style(set);Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
Excellent snippet, thanks for sharing it. I can see this coming in very handy when trying to update a old site where the client doesn’t want to re-code it.
Thanks for the snippet! It would be cool if there was a bookmarklet that did something like this. It might be useful to quickly check how much work you’ll need to do when converting a page to HTML5 standards where a lot of these attributes are obsolete.
I’ve made the bookmarklet that does what I described above! If you’re interested check it out at attrebuke.
Just found a little issue with this. Apparently in IE, removeAttribute will work on bgColor (with title-case C ) but NOT bgcolor . So probably best to have both.
As a designer who spends much of my time dabbling in / fixing other people’s code, this is a lifesaver! Can’t wait to try it out. Seems like it would work best for projects with targeted elements that need designed.
same with jQuery : remove all styles
$(‘#foo bar’).removeAttr(‘style’); remove one
$(‘#foo bar’).css(‘float’,”);If you are willing to replace any other inline styles for that element you can use the style.cssText property. document.getElementById(‘idstring’).style.cssText=
‘font-size:1em;color:blue;visibility:visible’; Here is the source above codeI was super pumped when I found this, thinking it would help me remove ALL of the inline styles from an HTML email, however it does not appear to work. I am beginning to troubleshoot why, but here is what I suspect: My HTML email is not an HTML5 doc
that’s all I got right now. I tried the bookmarklet without success too. Should this work for HTML email? I accidentally inlined all of my CSS, and a few hours of tweaks, and saved over top of the non-inlined version. The pain. I’ll spend a bit of time trying to get this to work, but at some point it may be quicker to redo the HTML email – from a time-saving perspective. What do you think?Incase someone else stumbles upon this post, here is how to remove inline styles from your HTML email: Add the following right before the closing body tag:
Save the file and open it in your browser. Right-click and choose Inspect. Then, right-click on the HTML element, select “Edit as html” and now you can select all to copy the HTML with the inline styles removed. If you are using conditional comments in the HTML (which you should be), you will have to do a bit of manual find and replace later to remove the inline styles from anything inside conditional comments.
As a follow up to my (dusty) old comment above, I blogged in a bit more detail, a solution to this problem:
http://wepiphany.com/remove-inline-styles-from-html-email/Does this ONLY work with using getElementByTagName? I tried this: var targetElement = document.getElementById(“div2”); and it didnt work. Can you use an ID instead? (would seem easier to target the element specifically, especially if there is only 1 element)