Removing Blogger's Default CSS from the Theme code [New way]

Many times an instance arises when you don't want to load in any of the default CSS styles included by Blogger. Sometimes it has to do with resolving the Render blocking issues caused by synchronous loading of the default CSS or other times it has to do with creating a custom theme which is fully independent of Blogger's default styling. Previously to achieve this, you required a fairly good understanding of the Blogger theme XML but now it is much simpler to accomplish this

Earlier to remove the default CSS, you had to implement the following code in the theme -

<style > <!--
<b:skin><![CDATA[
      
]]></b:skin>
Followed by moving all the CSS present in-between the b:skin tag into a separate style tag. This had the following drawbacks -
  • It made the Customise (Blogger Theme Designer) option completely un-usable
  • The quick edit buttons for widgets & blog posts became visible to all the readers
  • All the variables used internally by Blogger Theme Designer had to be converted back to actual CSS
  • Required a good understanding of Blogger theme code
  • Was not easily reversible without taking a prior backup of the theme
  • The Layout tab showed all the widgets in a single stack with no 
  • As is a hackish solution, the default CSS was still present on the page but was not loaded because it was commented out
Blogger team has understood this and has now provided a new way to remove the default CSS. To remove the default CSS, now you will only need to add the b:css attribute in the HTML tag of the theme - 

<html 
b:css='false' 
>
This works with both the older version (v2) of the themes as well as the newly launched themes (a complete re-write, internally termed v3) last month.

This makes it much simpler to remove the default CSS & comes with the following benefits -
  • Blogger Theme Designer remains usable & you can still make changes via it
  • The default CSS is completely removed from the page
  • Can be easily reversed by removing the b:css attribute
  • The CSS doesn't need to be changed or shifted anywhere
  • The quick edit buttons for the widgets & blog post are only visible to Blog admins (This is possible because the Blogger team has changed the location of the CSS responsible for showing/hiding quick edit buttons)
This makes it easier to remove the default CSS even for users with a limited understanding of Blogger theme code & presents all the developers to create more themes which have a totally custom design without having a dependency on the default CSS.

Hope that the Blogger team also creates a tag for removing all the default JavaScript present near the end of the body tag (Something like a b:js attribute)

Update: There is now a b:js attribute for removing the default JavaScript

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Tuesday, April 25, 2017
Post a Comment

you are the best, please make the comments directly after the post and embed them if possible it was not obvious to the eye, many would like to thank you and engage with you, and i am sharing your post as it did help me.

i used the b:css='false', and bunddle is removed, but authorization is still present can it be removed or it is better to leave it and what it does?

also i will reread your site hoping to find js blocker you said it is available now, or it just like the above with js instead. thanks my blog https://almseeh-almahadi.blogspot.com/

April 14, 2018 at 10:59 PM Delete