While this is probably a very silly question, is there a canonical way to use css modules in either Reagent or Om components? By this I mean CSS written in a separate file in SCSS or CSS without writing styling in EDN like garden.
Related
I want to add an script (react component) for a site which is not created with a ReactJS basis but html and dom manipulation. I want to do it with react since the component is going to operate some logic and also it is going to have some kind of state. I've never created a react feature for a website not running with react entirely. Do you think adding a react feature to an existing app is a good idea at all? And if it is, which is the best way to add some style to this script feature?
https://reactjs.org/docs/add-react-to-a-website.html
It covers how to solve this problem using babel but what about styles and css?
Regarding whether it's a good idea we get this per the official React Docs:
React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Perhaps you only want to add some “sprinkles of interactivity” to an existing page. React components are a great way to do that.
Here's their approach to adding limited React functionality to non-React pages without any build tooling, just pure HTML DOM.
As for personal opinion, which is veering off-topic, I've only done full pages in React bolted on to non-React websites. Though those worked fine, Mosè Raguzzini may be right in that it's too much hassle/overhead if it can be handled with vanilla JS.
You can import styles in multiple way:
normal css embedded in html as usual and className on react tag
import css with proper webpack plugin
styled-components
inline styles
CSS modules
Notice that if you are not moving to API or you do not need react features a refactor from vanilla javascript to react could be a unuseful pain.
As my Angular 2/4 app is growing more and more I have more than a hundred components, and each component has its CSS file.
Do you think it would be better to declare a CSS file in index.html and have all my styles there?
As I could apply specific CSS rules to a component by referencing its selector...
The CSS/SCSS/LESS-Files (depending on what you use) in default follow some convention, starting with your src/styles.css in the root of your Source-Folder.
In the src/app/app.component.css you'll dive on step "deeper". Finally you got the CSS-Files for each of your components.
I think it is meant to be like that:
Global styles, that apply to all of your Applications-Styles (like html and body style-definitions) should be declared in the src/styles.css. A bit more app specific, yet global styles for the Angular-App itself should be declared in src/app/app.component.css.
Specific Definitions that apply only to a single component should be declared directly in the components css-file.
This way you can keep your CSS organized and follow along the DRY (Don't repeat yourself) rule :)
regards
imo you should have separate css files for each component but also one global css file for shared styles
Having separate file for each component is a very good idea.
To maintain a scalable project with nice and clean CSS architecture I would recommend something like ITCSS
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
Consider using preprocessor such as SASS and LESS if u are not using them yet.
i know SASS/SCSS and I know whats object oriented, but can I say that SASS is a way to make CSS object oriented? Please correct me if I am wrong.
It's an interesting question as SASS/SCSS doesn't exactly determine the ability to make CSS object oriented. The CSS you write will. As you know it is simply a layer to pre compile CSS.
You could definitely and rightly so state that by using SASS it makes it easier to create object oriented-like css. It definitely helps as you can individualise classes into files, extend, include etc. and you can import them which helps in creating a closer to modular environment than regular CSS provides.
As SASS compiles to CSS, you really could achieve the same Object Oriented classes without it. But it may help you organise the objects.
I think it is not really object oriented, but you can use some functions like other progrmamming languages.
variable
nesting
mixin (function)
opearators (+ - * /)
These help you easier to reuse and maintain css code
I just started looking into sass and compass because I see a lot of code on codepen that uses it. I noticed in the documentation that you had to have something like a sass folder and it watches for changes in that folder and when a save event occurs it updates the stylesheet folder with the regular css. I'm used to writing my css, especially when I go through short tutorials or for practice in the style tag in the html file. Is it possible to write my sass in the HTML file? Do I have to now write my css in a different file? if not how would I do it?
No, you cannot to my knowledge. See Using SASS/SCSS syntax inside <style> tag.
The real question, though, is why would you want to use SASS at all? Some say it promotes and encourages poor CSS programming practice. The "features" it offers are in general of marginal usefulness. It adds another step to your workflow, and before you know it you will be fighting with gruntfiles and SASS versions and having Ruby installed properly. Personally I would also strongly advise against deciding to start using some CSS framework if it brings along the SASS/SCSS/LESS baggage.
Some preprocessors that we use in JS/HTML/CSS do have versions which can run in the browser, for development purposes. For example, you can run babel in the browser to convert ES6 to ES5. That is possibly because babel is written in JS, and it's not that hard to create a version which runs in the browser and does the transpiling on the fly. Or, to take one other example, you can arrange for Ember to compile templates from within the HTML. SASS, on the other hand, is not written in JS and there is no reasonable way to call it from the browser.
Assuming to have a corp.design-styleguide with lots of div-containers and div-widgets in html with images and css-styling and jquery and so on.
Is it possible to define such widgets as HTML-widgets in justinmind prototyper?
how can I underlay specific images and css to such a custom component?
til now, I haven't found a way to do this. is it possible or not?
any desktop prototyping tool known to rock such tasks?
You can use the "HTML Website" widget to include a folder with the html, the images and all the css files.