There is a way to remove unused css with uncss https://github.com/giakki/uncss
And an excellent blog post on the subject: http://addyosmani.com/blog/removing-unused-css/
However I fail to see how you would combine this approach dynamic content (for example generated by angular directives or async page loading) which will be missed by the uncss module.
Is there an optimal way to achieve this, I'm not wanting to manually go in and remove all the bootstrap css I'm not using.
My best recommendation would be to create a couple of static pages with examples of all of the markup you anticipate needing, and run uncss against that.
Even if the content is dynamic or asynchronously loaded, you should have a pretty good idea of what content is possible.
For example: you're probably very likely to need basic text formatting, headings, rich text content, lists, links, pictures, etc. Depending on the subject of your site, you'll also know whether you need to display code samples within <code>, <kbd> or <pre> tags.
However, it's not as likely that dynamic content would directly need to utilize the grid / layout system on its own, or would require any extraneous button styles.
Build a test page that includes everything you anticipate using. If you know there's something you want to keep, then throw it in. Otherwise feel confident knowing that uncss is doing it's job cleaning out everything else.
Related
I am using google's audit and its tells me to remove unused CSS. I don't know if that css is for just that page or the whole site. The CSS might be there but not needed on that page but another page. Can someone tell me how this works?
It is telling you to remove unneeded CSS for that page.
However you have rightly pointed out the flaw in this suggestion as it only takes into account the current page (in it's initial state, obviously if you have a pop-out menu it won't gather the CSS for that).
Think of it more as a guideline of making sure you don't send the whole of Bootstrap just for the grid and column layouts for example.
Overall this is very difficult to fix, just use the coverage section on the performance tab in Developer tools to make sure you don't have any massively bloated CSS files and you will be fine.
Obviously reduce your unused CSS if it is easy to do so.
The only other thing that this point covers (in it's description, not as part of it's monitoring) is deferring non-essential CSS.
You should defer any Style Sheets that are not required for rendering 'above the fold' content (and inline your 'above the fold' CSS).
This point is also covered in 'Eliminate Render Blocking Resources' so I never quite get why they add the suggestion under this part as well but I have added it for completeness.
I find this rule was good at guiding me when designing a theme from the ground up as it made me seperate global CSS and page CSS more effectively.
Unless your site is scoring 98 / 100 (or you have hundreds of kilobytes of CSS) and you want to squeeze that last little bit of performance out of the site, simply minify and combine your CSS files and ignore this point.
Google's audit tool compares the entire stylesheet against the current URL and then tells you how much of it is actually not used by the browser.
The browser however still needs to download the entire file and then match all CSS selectors that apply to the current URL.
There are many ways to deal with this, but I find it the easiest to use an external API tool like Splitcss that does this for you on URL basis.
If you have only a few URL patterns in your web application, you can use some CLI tools like purgecss or uncss.
I really wonder how such websites like https://medium.com/ (on the home page) https://qz.com divide the page according to tags or the order is like : header, some news, some articles in same shaped boxes,video, then some more content and then footer... so in one page they are able to show many things.. is that done by dividing page with HTML div tags or is there something else used ? I am a newbie trying to learn Django. I appreciate any help
I think there is more than just div-tags, but in the end it is (only) html, css and javascript that creates the visual webside on the clients' side.
Frameworks like the "960 Grid System" or Bootstraps Grid System can help you to keep content in a common order. Create templates for your CMS to achive a common design (Ahhhh: Use a CMS). Maybe use Less, Saas, etc. instead of writing plain old css-files.
Short answer: Look at their code. Of course you can't see their server-side code, but you can look at the HTML and it clearly shows that medium uses divs, while qz uses sections.
Now as to what you can use, there really isn't anything else. Simply because there isn't any need for it. You might want to add an uniform height for each of those "sections", but you don't need to.
Now to the serverside part: they certainly didn't hardcode every single section, but created a template for it. Depending on what technology they use that will look different, but it will always have
A template (often called function, template or module depending on the technology used) that has everything ready as to the HTML and CSS. This designs the layout and design of those 'sections'. It also accepts content that it will then insert into that structure.
A 'main-page' that uses that template repeatedly, but gives it different information. For Medium this might be something like: MakeStreamItem("Audio", GetFirstFourAudioItems())
Bootstrap 3 CSS is typically used site-wide or application-wide. Knowing this, I designed a tool that HAPPENS to use Bootstrap in a sample application. This is after going through requirements processes. The explicit design was "It happens to use Bootstrap in this example, but the target user would likely provide their own styling rules."
However, the results looked great and the powers that be have asked, "can this tool be included on any arbitrary page and still look like this?"
The short answer of course is "no". Bootstrap's styles do all kinds of things like using border-sizing: border-box on a wildcard (*) selector. This is going to mess with people's existing CSS if it's not already built on Bootstrap.
Is there a way to encapsulate Bootstrap styles so that they're restricted only within that particular tool/widget? So in the div <div class="bootstrappy">, everything is affected by Bootstrap classes and outside of there, nothing is? The goal is to be able to include my Bootstrap-styled widget on a page that didn't previously include Bootstrap, without modifying what was there previously.
It's OK if I have to do this as part of a build process (I am using Grunt right now, so that'd be the best option for me); what I'm looking to avoid is manually combing through Bootstrap in order to cull or modify element-level rules so that they don't stomp over a whole page.
Here's the situation. It can't be changed, I have to deal with what I have.
I have a few pages of which I have styled inside a wrapper, two columns of various content.
I was given (after my pages were done) a shell which I now have to integrate the content. I wasn't to do this in the beginning; I was told to build and style as if these pages lived on their own.
So, now I have to essentially cut-n-paste my code into divs that are already styled as well as the structure to the overall page. All of my style declarations use entirely different names so that's good, but there are many styles that are causing problems.
I keep thinking there is a way to just add a class to the body and then over ride all other styles by the use of that class but I'm not sure about that. My tests haven't proved fruitful.
As there are three other style sheets that are called in the shell, I'm just trying to find the most painless and efficient way to integrate my content....like being able to insert everything into a iframe w/o using an iframe.
I have thought of duping all existing style sheets, renaming them and then just keeping the necessary styles from the cms but there will be a lot of extraneous css left over.
Any other ideas?
If I understand you correctly, you want to style the elements you are inserting without any clashes with the existing document stylesheets. Have you considered using a prefix so that for example '.container' would become '.my_container' e.t.c. This way to easily navigate the html and stylesheets for your elements you can just search for your prefix.
I am developing a "bar" like what you see on the top of many default Blogger blogs that acts as a unifying element on otherwise different-looking sites. I want to package the code up into a neat package so that I can give other developers a few simple lines of code that they can paste into the beginning of their <body>.
I know there are many ways to do this, like using PHP includes, AJAX calls, JavaScript and XmlHttpRequest, Google closure templates, etc. BUT I want to make sure the bar is CSS independent, meaning other CSS that is used on the site does not affect my bar.
I am wondering what is the best method to accomplish this? Is inline CSS the only way around this?
Just like JavaScript plugin development, there's no guarantee that CSS classes and IDs wont be overridden later.
If the code needs to be inline, I'd suggest namespacing all of your classes and IDs: pluginname-wrapper, pluginname-container, pluginname-block, etc.
Otherwise, you could use an iframe element to store a miniature page.
I'd suggest sticking to namespacing. If someone includes your plugin and it's off by a bit, they'll be able to manually override the styles to make it look the way they want.
Someone who writes div {float:left;} or anything similarly silly will have problems either way, so don't worry about making it the same for everyone, just make it work with the default styles.