I am currently implementing a plugin that gets dynamically incrusted into a DIV (not an iframe) and am currently using Bulma as my CSS framework. The issue I am having is that since this plugin is going to be integrated into many sites, it will also inherit the styles applied to the parent website.
Due to many of the classes being a standard name in many frameworks, such as column, button, form, and others, this is creating a conflict.
I have been reviewing a couple of packages that either add a prefix to these classes as well as use a namespace.
Namespace:
The namespace route does not work since this does avoid our plugin from not interfering with any of the other sites' styles, the site's styles still affect ours.
Prefix Packages:
https://www.npmjs.com/package/gulp-class-prefix
The other route I was researching ways to add a prefix to all the classes from our plugin, such as -column, but I understand that this will output a CSS library with all the classes with the prefix but not my HTML files which have the class="column".
I am hoping to find a solution for this, as I would think this is, although not common, a recurring issue/question and I just haven't found the proper solution for this.
Any advice would be appreciated.
You can use the #layer css rule:
The #layer at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.
Example:
/* styles.css */
#layer bootstrapFramework, myPluginStyles;
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css")
layer(bootstrapFramework);
#import url("https://yourPluginStyles.css")
layer(myPluginStyles);
Doing this will override bootstrap classes with your plugin CSS classes. Due to the order of the layers.
Check out the browsers support for the rule.
You can read more about #layer CSS rule here: https://developer.mozilla.org/en-US/docs/Web/CSS/#layer
You can also checkout Web Dev Simplified Channel by Kyle on youtube. Here is the link to the video: https://youtu.be/Pr1PezCc4FU
Hope this answers your question!
Yeah. That's fine. Just add a prefix to the HTML classes too. It should work.
Or you can choose to ditch CSS frameworks for the plugin and write the CSS for the necessary components. You just do a little reset for your component's HTML elements and you can expect a fairly consistent design across multiple different implementations.
I feel this may be just helpful too. custom HTML elements too.
Best of luck.
just use div-to-select * { all:revert }
then add the code for the div & bulma
Explanation
all: revert gets every thing to normal so it makes all other frameworks class's styles to default
please take a look on https://agilecss.com CSS framework and UI kit, it provides some unique features not available in other frameworks, for example all the common used UI elements without JavaScript.
Related
I'm looking for a way to improve performance by minifying my app's CSS class names. This approach is used by large websites and is also described in this article.
Does anybody have an idea on how to do this with Angular CLI v10+ ? Ideally I'd want to add a webpack plugin while keeping the CLI for compilation, or a similar approach with minimal footprint, obviously for production builds only.
You can achieve something using the ViewEncapsulation API. By default it uses Emulated which generate large CSS class names. If you change that in your components to ShadowDom. This will encapsulate the styles and will shift everything to use Shadow DOM. With Shadow DOM the styles won't be leaked outside the components. You have to test it though and check for browsers support because it's not supported everywhere. Also, global styles might not work as you expect.
Edit: I also found this interesting article that explain something similar using Angular.
I have written an embeddable Web component for data visualization. There are of course associated css classes in addition to the js and html. I need to isolate the css classes so they do not override and/or clobber css class names of the larger Web app context it gets embedded in.
What is the best practice for achieving this?
A possible way to fix this problem is to use scoped CSS. I don't prefer the solution and only use it when nothing else is possible.
I just found out that scoping is not supported, at least not all browsers support it, only Firefox does
Another solution would be to use a prefix for all your CSS classes and id's, but this could take a lot of time if your files are large.
By the way, if embedding means in an iframe, there is no problem, because it does not apply the css of the site imbedded in.
I have some h1, h2, h3 and a lot of bootstrap snippets that I want to apply only to a specific part of my site, I added a unique class, say .unique but it would take hours to prefix over 1000 of CSS lines
I use sublime text
Thanks in advance
You could use a CSS-preprocessor like LESS or SASS (there are more). Both can do what you want, by just doing this:
.unique {
// Old CSS goes here
}
The have many other advantages over normal CSS.
common I would like to give you some ideas, cause i think your question has something to do with control css overriding.
the Jost's LESS or SASS solution is very good actually to prefix cause can use nested css features, but it requires a compile process, their eventually compiled files are still css. cause the .less or .sass files can not be recognized for html to render styling.
Another thinking To avoid css conflicts and wrong overriding,
Instead of including global styling, see if you can embed them in part of the specific section/page where they can get higher priorities than the rest global styles.
even the same css, generally, !important > inline css > internal css > external css
or javascript can trigger css override after previous css finished rendering on the page.
Instead of using css priorities or script running priorities to override styles, making two external mobile.css, destop.css for example, then using javascript to reload page to include different stylesheet when device width are detected to have been changed in browser resizing behavior.(This is one pop way used in responsive view)
using IDE to locate css patterns and replace them with your prefix if it's simple to match all the patterns.
So I know you can extend Foundation classes once you have the Foundation scss/css included and I know you can include the classes to the dom (OOCSS style) but here's my use-case:
I have style sheet, menus.scss. This is compiled into app.css along with Foundation.scss.
I can use the #extend here because I'm including Foundation before it.
#menu {
#extend .top-bar;
}
THE PROBLEM
Now, say I want to compile a separate sheet (because maybe it's only included on some pages)
Now if I #import Foundation into this stylesheet I will end up with the framework included twice (which is crazy of course.)
So... maybe a solution would be to have a version of the Framework that works on silent classes EG: %top-bar so I can include Foundation everywhere without fear of duplicating lots of code. I know there are some base components that will need to be included globally so that the sub-classes will work but how else can I do it?
To my knowledge silent frameworks don't exist so I'm looking for alternatives..
Ideas?
It will be perfect if you can isolate css critical to the initial page layout like grid, type, visibility components and inline them in to the page head or, if you have a ton of pages, in css file with the final size under 1-1.5k(really hard to do).
Then you can just defer auxiliary css and their size wont matter much.
Or You can use some css cleaner tool to remove selector duplicates or just make your own, it's pretty simple since the entire blocks of css will match.
I'm building an application in GWT and have a skin from my graphic designer which I've plugged into the app using UIBinder and it works beautifully. Now I want to bundle all the images using ClientBundle.
Mayne of these images are used in the css file e.g.
.nav{background:url(nav_bg.jpg) left top repeat-x; height:27px; clear:both;}
Before this css I have defined a tag to include the bundle.
How can I change the css entry so that it uses an ImageResource from my ClientBundle? I guess I can do inline styles for all the html tags but that's horrible separation and a lot of extra work.
I have successfully used ImageResources in the html part of the uibinder file (e.g. in a ) but I cannot see how to do this in the css. I have even inlined the css in a block but I still don't see the correct way to do this.
Any suggestions?
ClientBundles can now be used to host CssResources as well.
These CssResources are CSS files with some extra functionality.
The docs of GWT describes what you need in the section about ImageSprites.
I ended up skipping GWT css and image bundling altogether. Instead I've had my carve done using a css sprited image block made by the design/carve team. This has these advantages.
1/ Much less css porting since I can plug the html directly into ui binder and use the css tags from the carve i.e. not using uibinder css. As long as the html structure matches the carve then this is a lot less work than migrating all the css into gwt css.
2/ It also allows me to use svn/diff when applying changes - this was not possible when using gwt css/image spriting.
3/ I can easily put the image/css files on a CDN since the load tags are in the host page and don't suffer from Same Origin restrictions. FYI : yes I know about the XS linker as another way to do this.
It stops being useful when the carve uses css for positioning and I want to use LayoutPanels but that's not too bad as long as I request that the layout css is separate from the style css.
So in the end I discovered that, when working with design/carve from a third party, it's much easier to avoid using gwt css/images but to reproduce the same benefits using traditional css spriting and minification. I hope this helps someone.