Extract CSS Relative to Current Page Only

Is it possible to extract CSS relative to current page only? If not, could you please add this a function since it will be very useful. Thank you

Perhaps this might help you


Printninja, thank you. I mean in the Bootstrap Studio itself just for CSS that was generated by the user and not related to Bootstrap.

Any way to extract CSS for the page that we are currently working on in Bootstrap Studio?

Extracting it is not possible. At this time BSS does not have any features for showing or managing “per page” CSS. Hopefully we will see some features around this in a future build. It’s been asked for before to be able to know what pages each CSS class/I’d is used on. Not sure if it’s in the plans or not.

It would be possible if you could select the body of the page and make a component but that is not possible. The other option is to select each section and make a component for each one. Then you could open a new project and add your saved components which would only have the css for that page. Not sure how complex your page is but if its only 5 or 10 sections this should work.

Another option might be to create page specific css files and put only the css classes and id’s that go on a specific page in it. It would result in more css files, but that way you could have a central css file for classes on multiple pages and the rest in their respective files.

Another option, which is my current option, is to assign each page a tag of sorts that you add into the class and I’d names. This helps me know exactly which pages they are used or were intended for. Basically I mentally assign them page letters like ‘hom’, ‘con’, ‘abo’, which is basically the first 3 letters of a page name, and add it to the end of the class name .. -hom The drawback is that sometimes I duplicate a page and reuse these classes and have to rename them and alter the attributes to accommodate that page.

I’ve been using page ID’s a lot more to style specific areas of specific pages too. That’s been more helpful than page tags.

What we really need along with the OP’s request is the ability to see if a class is being utilized in our project or not, and if so .. what page. This would help a lot for cleaning up unused CSS. I have tried a handful of those CSS cleaning sites and have found them lacking.

Would be perfect if it just showed the page(s) the class/I’d is used on (if any) in the same area as we see the css file names to the right of the class or ID. If it is not referenced on any pages, it would not list a page and we would know it wasn’t used.

BUT it may not be as simple as that since sometime classes and ID’s are used within the JS files so the app would probably have to scan the imported or created JS files to see if a class ir ID is being used there too and list that along with the page maybe? Lots of variables to consider on this.

I'm quite curious, why that would be "very useful"?

Well as stated above, for me. It would help to know which classes/id’s go with what page for cleanup reasons. What happens if you remove a page from a site/project? Any CSS that is specific to only that page is not going to be easy to find unless you named the classes/id’s to recognize them. I would love a practical way to know if they are in use or not in order to remove those classes or id’s. When removing a page we could look at our css files and easily delete those classes/id’s associated with only that page. Making cleanup management easy to maintain as we work rather than as an afterthought using the inept online tools out there.

Thank you guys. I hope this feature is implemented in future versions. Regarding as to why it is useful same reasons cited by Jo. A website with few dozens of pages accumulates a lot of garbage CSS and it gets hard to manage/merge/maintain and clean it up easily. Also regarding clean up, a function which allows to swipe off/delete all unused CSS in one click would be also as useful.

This would be a great feature, and unique (I believe) to Bootstrap Studio. A definite selling point.

Weird, I could have swore this forum used to allow you to edit your old posts indefinitely. I guess not. Nor can you delete them. Another limitation of the forum plug-in. :-/

The discussion so far points to a potential solution. We can build something like a "Cleanup.." feature for the Styles group in the Design panel. Clicking it will show a dialog with all unused CSS blocks in the design, giving you an easy way to select and remove them. Would love to hear your opinion on this.

As long as the algorithm takes into account all of the styles used in the whole project, it shouldn't be a problem.

Another addition might be some kind of sorting algorithm as of importance, but with the find already implemented it's not a necessity.

It seems that the nesting of CSS rules that affect a selection already show up, or at least seem to.

BSS is really nice, and just keeps getting better.

I still think that (it's already possible to edit CSS and reimport it manually) using an external editor, like atom.io is all we need. There are already tons of plugin and extension to do all sort of CSS and HTML manipulation. Emmet, linter, beautify, pigments, etc. No need to reinvent the wheel. All BSS needs is an official "open CSS with external editor" button and reimport it on save.

HTML has other limitations, but it should be easy yo add external editor support for CSS; so that we already have tons of plugins and extensions ready to use. My vote goes to atom.io (free, open-source, the same supported by pinegrow plugin) but I know other devs prefer different editors.

I’m not fuzzy which way it’s handled so Marrco’s Suggestion is also a good one, and it would solve multiple suggestions. Either way works for me as long as both ways take all project files into account, not just the HTML files.

Haha *fussy not fuzzy lol.

Haha... I was about to say, "what does that mean... "fuzzy?" Thanks for the chuckle, Jo.

I like the idea of a CSS "cleanup" but it would need to scan any javascripts in the site as well, to make sure you don't delete CSS that's used in them. A simple CSS feature that I wouldn't mind seeing would be button or menu selection that would delete all disabled classes and unchecked rules.

I wouldn’t mind seeing would be button or menu selection that would delete all disabled classes and unchecked rules.

You might could use a checkmark for each option ✅ delete disabled classes, and ✅ delete unchecked rules, and any other options you may want... maybe even possibly archiving rules.

Maybe a little bit more complicated, but definitely rather safe than sorry.

@PervasiveRichesLLC How did you create those green check marks in your post?