Comments (15)
Have you considered switching to css modules? With that you can also remove the css folder completely and keep the css and component js in the same directory, which makes a lot of sense.
from react-boilerplate.
@hampusohlsson I have, and while I felt it didn't make sense to include them with the original application structure, if we decide to adopt the ducks approach that's definitely something I'm going to reconsider! (see #27)
from react-boilerplate.
There are a number of approaches, but in general it feels like having local css on a component level is getting more and more traction and support in the community (either by css modules or js styles using something like Radium). It makes maintainability a lot easier in large apps, as it removes the need to remember difficult naming conventions and rule pollution of the global css scope.
from react-boilerplate.
css modules (and generally styles near the appropriate js code) make total sense.
css folders are dead :)
from react-boilerplate.
@hampusohlsson @MoOx agreed, read the latest in #27 and check out the v3.0.0 branch, it has a new structure with CSS modules! 👍
from react-boilerplate.
I'm still unsure where to put global CSS rules though, how do you handle that?
from react-boilerplate.
I avoid global css at all cost. That said, there is still some (even just the css-layout default https://github.com/facebook/css-layout#default-values) that I generally put in the "App" component (the top level component).
from react-boilerplate.
How do you handle variables, hacks (e.g. clearfix),...?
On the v3.0.0 branch I currently have a folder called global
that holds those files, but I'm not happy with that solution.
from react-boilerplate.
I have very few variables that I send directly using https://github.com/postcss/postcss-custom-properties#variables.
I avoid hacks as class and prefer to use them locally (these days we can use flexbox ;))
You should also check out css modules compose
feature (I don't use it, but you might find it helpful).
from react-boilerplate.
For stuff like visually-hidden, maybe you should make a component ;)
from react-boilerplate.
@MoOx ah the component idea actually isn't bad, I like it. Will think about a nice, beginner friendly implementation!
from react-boilerplate.
Yeah, global styles is one thing that kept me from using css modules because I thought it wasn't really possible. I'd like to use the same button styles, form input field styling, etc throughout the application. But the compose functionality seems really interesting! See also http://glenmaddern.com/articles/css-modules
from react-boilerplate.
@jessedobbelaere the a react app, you should just create some Button & Input components ;)
from react-boilerplate.
Pretty big fan of CSS modules now and have more or less decided to use it.
I'm closing this issue, but if you have anything else to say or you think there might be a better way of doing things don't hesitate to comment!
Thanks @MoOx @jessedobbelaere @hampusohlsson for the input, much appreciated!
from react-boilerplate.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from react-boilerplate.
Related Issues (20)
- Redux Saga API is being called twice yet the action is dispatched only once HOT 1
- npm setup failed: `Error: could not resolve` HOT 4
- The DLL files are missing. Sit back while we build them for you with "npm run build-dll" HOT 1
- not working on macbook
- Include relative static files from index.html HOT 3
- Migration from old boiler plate to CRA base boiler plate
- updating node 12 to node 16 HOT 1
- micro frontend structer HOT 1
- upgrade package and project HOT 1
- ngrok - platform darwinarm64 is not supported HOT 3
- caniuse-lite is outdated HOT 1
- Not able setup react boilerplate on Windows 10 Home Single Language
- Existence of security vulnerabilities
- opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error'
- Actions calling in different containers HOT 1
- Install New Project
- your website is down
- upgrade the project from react-boilerplate to cra-react-boilerplate
- migrating to react-router-dom v6 HOT 1
- How to migrate from react-boilerplate to react CRA? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-boilerplate.