I have a project with 1 css file and a lot of templates (.tpl), so I know that in my css file there are a lot of classes which I don't use . How can I find these classes?
Is there an editor, plugin or other way, without searching each class in the whole project?
There is another add-on from sitepoint that finds unused selectors
http://www.sitepoint.com/dustmeselectors/
What you're looking for is a kind of code coverage tool for CSS, like:
https://addons.mozilla.org/en-US/firefox/addon/10704
http://css-discuss.incutio.com/?page=CssEditors
http://www.jetbrains.com/idea/features/html_css_editor.html
Long Method
This method uses a feature that I know is available in Eclipse, the multi-language IDE. Take each class and search for eat in the project. If there is only one match (the css file, you can safely remove the class) else keep the class in the css file.
Try CSS Brush, a chrome plugin for creating CSS live. many features like select from page, use complete CSS path or filter to shorten the selector. Context-sensitive-menu and many more features.
Related
I made my site recently, using this template: https://startbootstrap.com/theme/resume
I've seen that the styles.css file has -dark elements alongside its -light elements, for a potential dark theme. My question is, how do I use these? Is there a line in the css file I'm missing, or should I add a line in the html file?
You may need to make use of scss custom styling: https://getbootstrap.com/docs/5.1/customize/sass/#color-schemess
I also took a look to the source code from https://startbootstrap.com/theme/resume (and the comment section for people asking for dark theme; no answer from the author) and he's using scss as well while in development. He's using Bootstrap with little to no modification starting with his scss files in his repository: https://github.com/startbootstrap/startbootstrap-resume
I think that your best solution is implementing some additional custom styling from a 3rd party project like: https://vinorodrigues.github.io/bootstrap-dark-5/
You can also try the approach suggested here: https://blog.shhdharmen.me/toggle-light-and-dark-themes-in-bootstrap using some JS code.
With as all being very careful about resources within web development I am looking for a tool that you can pass a url and it show what CSS is actually used on that page but more importantly have the ability to download or extract that CSS Selectors and the actual css to create a single css of only the css needed to render that page, I have tried DustMe and various plugins. I realized I am not using 89% of bootstrap for example but picking it apart is almost impossible on pre built sites.
thanks
There is a online tool which provides that service, its not free though, unused-css.com
I'd recommend using uncss (requires node).
It can be added to your grunt build scripts to remove the css your are not using and is easy to configure
uncss.io works pretty well. Just enter your page URL and it will give you the cleaned CSS. It works for me on some pages, but not other pages.
REF: unused-css - (Paid Service)
or CSS Trashman
EDIT:
Use uncss git which requires node.js. It can be added to your built-in scripts to remove the unused css.
We provide a default CSS file (and the HTML mock-up) which they modify (e.g., color, background-image) to fit with their intended look and feel and feedback the CSS files to us.
Now the problem comes. We have a dozen of partners. If we need add new selectors in default CSS, we also need to add default CSS selectors to all partners CSS files first. We then send the new CSS files to partners to modify. It's a maintenance nightmare for our web designers.
Is there any CSS generator solution that we can just modify the CSS template and then populate the changes to all CSS files?
Thank you for any suggestion.
The main CSS generators/preprocessors are LESS and Sass. More reading: https://stackoverflow.com/questions/8411066/less-vs-sass-vs
I didn't quite understand what you are trying to do, but I will share some CSS generators that I use regularly:
If you want to generate CSS automatically from the markup online for free, then you need this:
http://beecss.theextremewebdesigns.com/
If you already have (messy) CSS & you would like to clean/minify it online for free, then you need this:
http://beecss.theextremewebdesigns.com/css_clean_css_minify/
As #Wesley mentioned, if you can post more examples/specifications, perhaps then I can help more.
There are no CSS generator as you like. But we can get css generator (on internet) from the scratch for a image mockup.
You can try this, newly founded on the web:
http://www.css3generator.net
You can adjust different parameters, and compare differentes, and it provides the css codes.
Great when you forgot how to write some pieces of code and syntaxes.
I want to edit a html template to create a simple version for my need. I delete some ; but is there a tool to remove unused classes from CSS or I need to remove the manually?
For example, <div class="something"> is not used in my html; but still I have .something {} in my css file and make my css heavy. Currently, I delete unused classes from CSS one by one manually. I wonder if there is a way to delete any class in CSS which is not referenced in html!
Check out something like http://unused-css.com/. If you pay for it, you get to have it crawl your site and create a clean version for the entire site.
If you want a browser-based solution, try the Firefox plugin CSS Usage. You can open up Firebug, click on the CSS Usage tab, click on "Autoscan", then navigate your website a few times (be sure to hit every page). It will keep track of which classes are used and you can export a "cleaned" version. This requires more manual work and may be subject to broken styles, but if you are careful, it should work fine.
The answer is not really, due to the fact a CSS file can be used across a magnitude of HTML pages.
I'm sure some people might have made a tool that parses all their own specific HTML pages and creates a list of 'unused' css classes, but it'd be likely to be very bespoke to their needs (also if the HTML pages render out different things due to a user's choices, how'd you know that the CSS class is or isn't used?)
I'd like to compare my CSS files with the classes that I'm actually using in the site, and generate a new CSS file that contains only those classes. The point being to get rid of classes that I'm not using.
I previously used the Dust Me Selectors extension for FireFox to find the used and unused CSS selectors but it doesn't work in FireFox 6 any more.
Are there any alternatives?
When you put your site to GT-Metrix. Than you can see the un-used CSS selectors. Or you can do it with Google pagespeed.
You can try this online tool or use Google Chrome's developer tool(installed by default, no extension needed), which has audits tab to display unused css selectors on current page... but i dont think there is a way to have it done automatically for you...
You can try CSS Usage extension for Firebug. It works lika a charm, but it requires manual work https://addons.mozilla.org/en-US/firefox/addon/css-usage/
This system claim to do that:
http://sourceforge.net/projects/cssmerge/?source=dlp
But I couldn't make it work, though.
So here it goes some manual tools to compare the files. It is not as fast as an automatic solution, but would make it faster than going by visual comparison alone.
http://www.diffchecker.com/
http://www.araxis.com/merge_mac/index.html
http://csscompare.codeplex.com/