PurifyCSS – Remove unused CSS(github.com) |
PurifyCSS – Remove unused CSS(github.com) |
The rest of the time I use it to illustrate when we aren't living up to agreements that we've already made.
My use-case is for analyzing a large, existing website that has many years of accumulating CSS, and getting a feel for which blocks of code can be safely eliminated.
I'm pretty sure what I'm after needs a full-blown DOM to work effectively - either with something like PhantomJS or even running as a Chrome Extension. So far I haven't seen anything that fits the bill.
IMHO, do it offline and out of browser would be easier. But I also think doing it directly with the codes can be hard too since there are so many way that those css will be added to templates.
1: https://addons.mozilla.org/en-US/firefox/addon/dust-me-selec...
It's fairly easy to roll your own version of this and do analysis.
The problem with the PurifyCSS approach, like so many before it, is that you cannot really do this accurately from the server. It has to be done in the browser.
Helium is a dev tool. It takes a list of sample urls from the developer because its presumed the engineer will be able to make the best choice as to pages that represent all the aspects of their site.
It will work in any web page regardless of framework, because ultimately its all just web pages.
Helium will find the actual style sheets loaded into each page, then at the end of the scan give you an accurate and realistic report of the css selectors that were not found anywhere in your site.
There are some minor limitations, such as the inability to test for user-interactions with pseudo selectors like :active, :focus, :hover, etc.
1. Does it spit out a css file or multiple css file I can use immediately? Can i actually amend a local document with it, or do I have to copy paste?
2. Does it give any critique on poor selector methods? Definitely have a few foolish ways of doing things that could be improved with a little bit of "hey...stop that" feedback, in my work
3. ??? PROFIIT
4. Can it give me a few stats on the css to benchmark it? You're already showing me the unused ccs selectors, can you present other data that you could present to your boss and say hey...look at this, this is why it's worth doing this stuff
5. Known browser issues highlighted. "Hey! In IE8...that div ACTUALLY does this". Also, heres how to fix it. Insta–contextual documentation. As I say that I realise I'm asking for Clippy back in a way so I shall bow out. Responsive design? worth thinking about...anyway!
Really interesting project! I'm going it use it this weekend and see how it goes :)
Rather than "blob" all your CSS together, and then "de-blob" it, why not build your CSS dynamically based on what components your app is using?
[1] I strongly encourage you to watch this talk: https://vimeo.com/116209150
$(...).addClass("bg" + getSomeClassIdentifier(obj))
There are certainly some arguments to keeping class names as opaque magic strings, but given certain levels of dynamic complexity and the lack of tools like CSS class inheritance, naming policy is sometimes far cleaner and more manageable.
Also, there is a minor concern about false positives. If you have a class called "name" or something generic like that, the odds of that string appearing in non-CSS usage your source code is fairly high.
The script basically does:
1. Use REGEX match all css classes, `cat` into one place
2. Read the class line by line and search in html,js files to see if this css is used (even support #addClass from js)
2.1 it also supports several class adding styles e.g. class="abc", class: "abc", :class=> 'abc' or even "xxx" class in this: class="abc xxx ijk"
2.2 People even do this in js: $modal.append($('<div class="modal-close-icon"></div>')); and the REGEX can also detect this lol.
[1] https://gist.github.com/50kudos/3028fac585eda85aea9a
You can adapt my REGEX, and custom your directory where those css files are in.
Simply copy the code and save into your filename.sh, and can run safely because my script don't write any file of your project.
Go to http://www.peterbe.com/plog/mincss and click to view source. 120Kb of bootstrap excess baby!
Workflow wise, this is a huge win.
(just in case you were also wondering) =)
Given today's CPU speeds, I think the only thing you can save with this tool is bandwidth on mobile and even with this, the effort is not always worth the resulting speed gains as mobile networks get faster and faster.
Awesome! I worked with a tool like this that did not have dynamically loaded classes in mind.
For people not sure on how to use this, I personally use tools like these when working with a CSS framework.
The auto-remove part you would have to code yourself though.
The reasons people are running into problems with global css scope is because they don't understand the basics of how to write effective and maintainable CSS. Seems like many front end devs nowadays grew up with css hand-holding libraries like bootstrap, and can't seem to wrap their heads around completely necessary things like taking account for CSS specificity and how the cascade works and how to use it to your advantage.
https://github.com/css-modules/css-modules
https://medium.com/seek-ui-engineering/the-end-of-global-css...
Inline styles are great, but they don't support basic features such as pseudo classes/elements, so even implementing simple components like buttons was cumbersome.
With latest version of webpack's css loader you get css scoping (you no longer need to add lengthy prefixes to all selectors) and you can also use additional loaders for post-processing your styles (we use a lot of postcss plugins such as autoprefixer).
Have a look at this example:
https://github.com/css-modules/webpack-demo
And here's a great comparison of the main CSS in JS techniques:
Edit: I see we're referring to inline styles instead of requirecss. In that case, it's because code reusability becomes a pita and you bloat your JS.
A variant of this is where you compile one CSS file from many view-specific ones beforehand. The advantage is it'll speed up things on the client side and the programming overhead is relatively small if you're using something to generate CSS anyway.
Does it? Last time I had a bigish web project, I was starting to inline everything (CSS and Javascript), and had my backend language deal with DRY. It even solved the problem CSS people use CSS generators for. As a rule, both CSS and javascrit suck for organizing content.
But then, I declared that project dead, and didn't wait to see the consequences of organizing things this way. So, somebody may have a much clear understanding about why that's wrong.
Edit: Also the point I was getting at was that cascade is a useful and powerful tool, just as the methodologies for controlling it are. We will also soon have a property that will eliminate the cascade entirely... all:unset;
I just think the problems and solutions listed in the talk are either non-problems or are things that could be solved in superior ways. And that it introduces more problems and limitations than it solves.