Example:
main.scss that exists on every page declares a default style for button:
button {
box-shadow: ...;
border-radius: ...;
}
And then when I use any package from npmjs, buttons from them are broken. What are the best practices?
My thoughts:
Do not use global styles. Style button on every page separately.
Create component with custom classname (for example appname-button)
To solve your problem pick one:
Use custom, prefixed classes:
.app-btn {}
Class selector has more weight than tag selector, so your stiles will be applied. Using prefix (app) guarantees that you will not mess with other class selectors.
If you are using React you can use css modules
This approach requires some setup, however allow you to use the same selectors without any worries.
Cons of using CSS Modules:
Setup is a bit harder then pure css (minor)
CSS bundle slightly bigger because of using hashes (minor)
You will not be able to reference elements via className because it will be dynamic. Means that you may experience some difficulties with test, but this can be solved using the test-id tag (medium)
There are quite few ways to handle this. But what is the best depends on the need of your project and your teams preference.
Ideally, each your component should have it's own set of styles, separated from global scope. So, you have some sample folder structure
components
- Button
-- Button.js or Button.tsx
-- button.css
-- Button.test.js or Button.test.tsx
E.g. if you are using atomic design, you might start development from simple atoms (such as button, input, etc.), and each atom contains it's own set of styles.
There are at least few approaches to look at:
Use styled-components: https://github.com/styled-components/styled-components
Use CSS modules
Use one of many other solutions (e.g. https://github.com/kof/react-jss, https://emotion.sh/docs/introduction, etc.) There are quite a lot of them, depends on what are you looking for.
change:
button {
box-shadow: ...;
border-radius: ...;
}
to:
button2 {
box-shadow: ...;
border-radius: ...;
}
or any name you want and call it anywhere you want
Related
This is generic question, is it possible to monkey patch the CSS from link tag? I want to modify PrismJS library that have color and background and patch it to have --color and --background. Is something like this possible dynamically using JavaScript?
I would like this to be generic so no Service Worker, that will work only for local files that can be changed by modifying the file, I want to affect every possible url the same I'm patching JavaScript file. I can assume that the CSS selectors will always be the same.
The problem is that without the monkey patch I will need to maintain all themes that PrismJS have for different colors, I can write script that will create those styles for me but I want to know if there is a way to monkey patch. Also I can have single CSS file to be used instead of the PrismJS CSS, but I will lose different styles.
I have other options but right now I only want to know if monkey patch of external CSS is possible? I can't find anything like this.
I need to add that PrismJS themes are pretty simple they are just few selectors with colors. I'm not sure if they all have same selectors though.
EDIT:
To give you context I need this for jQuery Terminal to render text that user type (any programming language to be in color). I have one CSS that I have locally but without that file it don't work exactly the same (mainly there is lack of style for text selection that I would like to be in color, to have 100% working code as I want). The idea is to use same monkey patch I have but to use prism.css.
Due to certain circumstances, I'm forced to move my Angular 2 App to AngularJS.
Most of my Components have their own StyleUrl property for their specific stylesheets. So far searching online, I haven't found a way to do so in AngularJS, except integrating Webpack to my project, however I'm having trouble doing so.
I was wondering if there's another way, and if there isn't, what's the proper way of using Webpack for this?
EDIT: 5/9/2017:
Wanted to give an update on my situation. After some testing on the Dynamic CSS loading module which Yeshwanth provided, I discovered that the component CSS leaked to the outside DOM, which meant I had to keep searching for another solution.
Eventually I resigned to use the SCSS approach: Inside the component template, define one, big, encapsuling div element, and give it an ID of some kind. Then, inside an .scss file, write the style block for that ID and INSIDE that block place all of your component styles. After compiling the SCSS file, the resulting css file will act only on the component's elements.
I'm not sure if this fully emulates the emulated Shadow Dom of Angular 2, but for my purposes it was enough. Hope this helps.
I think in angular 1.x you cannot import style specific to your component.
But the dynamic css loading might come handy.
Please refer this
I wan't to add some interactions to my Angular 2 project to enhance its user experience. I know how to interact with DOM, or change the status of element property. It is possible to write code for each of my component. But there are some examples which will be used site wide, for which I don't want to repeat the code everywhere I want to use it.
A simple example will the fade in when scroll elements. I know how to achieve this in a particular controller, but I need help to make this behaviour global without code repetition.
I Javascript / jQuery, we can have a master js file included which will have the event listeners bound to the elements, which is available for all pages. How to achieve similar in Angular?
This can mostly be done with Directives. Taking your example, you would create a [scroll-fade] Directive:
#Directive({
selector: '[scroll-fade]'
})
export class ScrollFade {
}
You'd then need to listen for the global scroll event, with #HostListener('window:scroll') and apply your styles to the :host element.
You would then use it by applying it to the elements you want affected:
<div class="scroller" scroll-fade></div>
If you need something more complex, you could always build a Shared Module where you would create reusable components, without repeating the code - which you could then transform into a library and share back with the community.
Theres an answer here on StackOverflow that explains how to.
I am just starting to learn Radium, so please overlook my ignorance. If there is anything great about CSS files, it is that you link to them once in your main APP component and forget them, they are cached and can be used in all your components simply.
But, you cannot connect any interactivity between them and any user input.
Here is a simple snippet I played around with based on the sample provided on the Radium github:
import React, { Component, PropTypes } from 'react';
import Radium from 'radium';
const squareStyles = {
both: {
background: 'black',
border: 'solid 1px white',
float: 'left',
height: 100,
width: 100
},
one: {
':hover': {
background: 'green'
}
},
two: {
':hover': {
background: 'red'
}
}
};
#Radium
export default class APP extends Component {
......................
render() {
// final result is yellow
squareStyles.one[':hover'].background = 'yellow';
return (
<div>
<div key="one" style={ [squareStyles.both, squareStyles.one] } />
<div key="two" style={ [squareStyles.both, squareStyles.two] } />
<div style={ { clear: 'both' } }/>
</div>
);
}
}
Even though the squareStyles.one[':hover'].background was preset to green, user input made it yellow instead. Great!
But what if I need squareStyles in several components? I do not want repetitive code defining squareStyles in each of them.
Question:
With Radium, or any 3rd party add-on, is there a way I can have a styles.js file global in nature much like css?
If not, who would even consider inline styles when it would just lead to repetitive code that one of the benefits of css takes care of?
Thanks
Update:
I put square styles in a js file encapsulated under module.exports.
I added const styles = require('../styles/styles'); in lieu of the local squareStyles object.
I prefaced all objects of 'squareStyles.' to 'styles.squareStyles'.
Everything works, so ...
I assume I will have to add that required file to every component. Yes?
Will the file be cached?
If I convert all my css files this way to take advantage of user interactivity, will my app become slow?
Am I even going about this correctly?
Again thanks.
With Radium, or any 3rd party add-on, is there a way I can have a styles.js file global in nature much like css?
Yeah sure you can use Webpack to automatically make certain things global, however you don't want to do this. The idea of requiring / important is to not only explicitly manage dependencies, but also reduce the footprint of your site. If you eventually want to get into things like code splitting and loading only the necessary parts of an application up front, you'll want to require things manually.
If not, who would even consider inline styles when it would just lead to repetitive code that one of the benefits of css takes care of?
Inline code CAN lead to repetitive code, and CSS can also leave to repetitive code. One of the things CSS allowed developers to do, was to be lazy and write classes and not have to worry about if there was a class that already addressed the majority of the visual representation they wanted. It's the age old idea that you can use the best language and technology stack and still write bad code.
The thing about React, is that it allows you to create reusable components. You write a couple of reusable component, you import them in another component, then you're only having to write the inline styles once, same as css. You can argue that importing components is more tedious, however there are plenty of problems with css that you'll be getting around by taking this approach. See here: https://speakerdeck.com/vjeux/react-css-in-js
Will the file be cached?
No. Browsers are built to support CSS and cache them. But you have to ask yourself: is the different negligible? For instance more than ever, people are more concerned about users hitting your site for the first, which is where the bounce rate is the highest. You can argue for a cached css file, however if this css file represents the entirety of your application, it will most certainly take longer than inline styles from a couple of react components. Moreover, mounting additional components with additional css may be trivial enough load wise that it wouldn't matter. I'm still measuring this stuff too but what's important to note is that you should think outside the box in terms of what css has preached to developers all these years. There may be a better solution... try it out for yourself performance wise and report back!
If I convert all my css files this way to take advantage of user interactivity, will my app become slow?
https://github.com/FormidableLabs/radium/issues/58
Word on the street is that the performance hit you would get is negligible. Again, put together a small test and see if the performance works for you.
Am I even going about this correctly?
A lot of new methods take time for them to catch adoption with developers, and when they do usually you'll see different patterns come out. The pattern you're using is definitely an option. You may see that option refined, changed or even scrapped (similar to the path of flux if you've been paying attention that project and all it's refinements / spinoffs). I'd say to encapsulate the css into as many reusable components as possible, then use a file like yours as a way to reuse chunks of style that wouldn't necessarily be a component (for instance a piece of code that adds text shadow and box shadow to an element / component), and then lastly leverage one off inline styles for things that aren't patterns or won't be used.
I built an application using Polymer and its working as intended. I'd like to style it with a totally custom look and feel.
Is it possible to disable default styling of Polymer elements via a flag or some roundabout way, or will I have to manually override everything I want to change?
To override an element's styles from the outside, you can use ::shadow and /deep/:
http://www.polymer-project.org/articles/styling-elements.html#style-fromoutside
Those pierce through the Shadow DOM boundaries and allow you to target nodes internal to the element. Unfortunately, this means you need to explicitly write rules that target these nodes. This is sort of the deal with components...an author defines the look and feel, but you're welcome to override it as consumer/developer.
It's also worth noting that the visual elements use the non-visual core-*/polymer-* elements to get their job done. If you need a completely different UI, I'd create an element that reuses those core elements.