I'm trying to break up my monolithic React app into reusable parts that can be shared with other projects.
I want to extract some generic components (e.g. Button, Header, Dropdown, etc.) into my own little UI library. The problem I'm running into is how to manage the CSS. Right now, my app just has a single stylesheet that takes care of everything.
These are the solutions I have seen:
Embed the CSS styles for each component in the JS for the component itself (CSS in JS).
import or require the CSS files in the JS for the component and use webpack to bundle the CSS file for you.
I really don't love either option. I understand the appeal of co-locating the styles with the component, but I feel like: a) it clutters the component definition, and b) it fights with how CSS works (no more taking advantage of cascading styles since everything is so tightly scoped to the individual component).
And, I can't bring myself to import a CSS file. That just feels so wrong. We're not even writing javascript anymore at that point.
I realize that these aren't exactly popular opinions, but is there a 3rd option that I'm missing for getting a good old fashioned CSS file from an NPM module that I can just drop in my HTML and use? Ideally one that doesn't involve copy/pasting it from node_modules. :)
Thanks to the tip from #EmileBergeron I found the PostCSS import plugin. It can find and inline stylesheets in node_modules and in your own code.
So, my workflow will be:
npm install my-ui-library
Import the React components you want to use into your JS files import { Button } from 'my-ui-library'
Import the corresponding stylesheets into your CSS files #import 'my-ui-library/Button.css'
That way I'm importing CSS into CSS and JS into JS which feels a lot more natural to me. It might also make sense to just have one stylesheet for all components instead of breaking it up per-component, but that's a detail I can figure out later.
Then, I just need to add PostCSS into my build system to inline everything which has been pretty simple in testing.
I'm trying to customize the design of my ionic app, I don't know much about SASS, but based upon my research, most people have suggested or are customizing the defaults of ionic through the scss files. Since I don't know much about SASS, I was wondering if its safe to make changes to ionic's defaults through the ionic.css file.
Yes it is "safe" as long as you plan to never use sass! If you use sass it will overwrite what's in the ionic.css file.
Having said that, you should really just use sass as it will make your life a lot easier. You don't need to learn anything new to use sass because writing normal css in a sass file will work just fine.
You can then add bits of sass as you progress and pick them up.
I'm trying to sift through all the CSS options / packages available for EmberJS and am looking for suggestions. I suppose it will help if I list what I need:
SASS syntax (variables, nesting, creating mixins, and extending)
Ability to import other CSS libraries
Pod support (although I'm not positive I'll be using this feature at the moment, but I at least want to be able to have one CSS per route/component)
Autoprefixer
Is there an all-in-one Ember package that will give me all these? Thanks!
SASS syntax (variables, nesting, creating mixins, and extending)
You should think long and hard before taking the blue SASS pill. SASS is a technology trending towards obsolescence, which was designed mainly to support some bad CSS coding practices, as well as overcome some deficiencies in earlier versions of CSS.
Variables are supported by postCSS plugins in a standard way which is compatible with the upcoming CSS variable syntax.
Nesting is an answer in search of a problem. It promotes a bad style of coding involving excessive dependency on HTML structure. Properly constructed systems of CSS classes, orthogonal to HTML, make nesting unnecessary.
With regards to mixins, I have not seen a real-life situation in which mixins or other more advanced SASS features were actually necessary. Using them, you end up learning yet another (weird) programming language, which you have to debug, and make sure all the people on your team know.
When it comes to extending, CSS experts counsel against it. Besides potential issues of performance and code size, they hide the logic of the CSS code, and require jumping back and forth from file to file to maintain and extend and debug. Everything that is accomplished with extending can be handled with properly-designed CSS classes.
SASS is slow, is bifurcated (binary version vs. Ruby version), and can give rise to strange npm installation problems. My advice is to avoid it.
There is an interesting read about SASS vs. postCSS here.
Ability to import other CSS libraries
Ability to import other CSS libraries is not a function of any other decision you make, or what package you choose. You can simply import these.
Pod support (although I'm not positive I'll be using this feature at the moment, but I at least want to be able to have one CSS per route/component)
Indeed. There is at least one new-ish Ember add-on to do this (and probably more), which IMHO is designed extremely poorly and grossly over-engineered. It follows the Ember approach of doing way too much, in an opaque way, in the name of being "helpful" (until it isn't, at which point you're screwed). This is great if you want your CSS to be littered with classes like .my-component-a34fba.
Until there is a better alternative, I'd do this manually, which is quite easy. Simply place your CSS files in the pod, and then import, from your styles/app.css or equivalent file, the CSS files from the pods you want, such as #import '../pods/thingie/; to import its index.css file. Yes, you will have to do some maintenance of these imports yourself, but how many pods do you have?
What I do to avoid a huge styles/app.css that would require constant updating is to place an index.css file in each pod and import that. From there, import a stylesheet for that directory itself and any necessary subdirectories:
/* styles/app.css */
#import '../app/pods/thingie';
/* app/pods/thingie/index.css */
#import `./style`;
#import `./subdir1';
#import `./subdir2';
Autoprefixer
You need look no further than the excellent postcss/autoprefixer.
Is there an all-in-one Ember package that will give me all these?
It would be nice if all our problems could be handled by all-in-one packages. Unfortunately, all-in-one packages are always missing two features we wanted, and we can never figure out how to add them. They always do one thing we didn't want them to do, and we can never figure how to turn it off. They import old versions of their subpackages. They break when there's an Ember upgrade. They stop being maintained. The Ember philosophy itself sadly promotes this pernicious all-in-one mentality--all my problems can be solved by yet another add-on!
You are better off understanding individual technologies, choosing simple, bounded, reliable implementations of them, and weaving them together yourself. Just my two cents.
This might be the closest thing you're looking for:
https://github.com/ebryn/ember-component-css
Which supports using pods layout, and lets you use ember-cli-sass.
To use auto-prefixing, there are plenty of sass libraries out there to help you out, like Bourbon.io, which you can install via npm. Then, it should just be matter of configuring the import paths via the sass options in the ember-cli-build.js
I recommend PostCSS. Last I checked, it doesn't work out-of-the-box with ember-component-css, but you don't need ember-component-css to namespace your styles.
You can modify Ember's Component generator / blueprint to (assuming you're using pods):
Add classNames: ['component-name-here'], to the generated component.js file.
Create a _component-name-here.css file/partial in app/styles/components (or similar), with a class .component-name-here to contain all styles in the partial.
If necessary, #import that new partial in your app.css.
Then all your Component styles will be namespaced.
To handle variables, nesting and Autoprefixer, you just need to set up PostCSS with the right plugins, e.g.:
plugins: [
{
module: require('postcss-partial-import'),
},
{
module: require('postcss-nested'),
},
{
module: require('postcss-custom-media'),
},
{
module: require('postcss-custom-properties'),
},
{
module: require('autoprefixer'),
options: { browsers: ['last 2 versions'] }
},
],
I'm using ember-cli-css-preprocess, which gives you the option to use SASS as well (alongside PostCSS), if you wish.
I have an existing Django project which uses regular CSS. The style sheets are broken up by functionality, so there is a nav.css, course.css, default.css, reset.css, etc. All of these are imported in a main.css, which is referenced from the html pages.
I would like to use Compass in this project so I can make the style sheets more manageable and also make it easy to skin the UI.
Before checking out Compass, I looked into Sass, and created .scss files for all my style sheets.
Now I realize that it may be better to use Compass than just Sass, because I will get all the default styles that come with it. However, I am a bit confused about how to start the refactoring process.
What would be the right process to refactor (in baby steps) an existing project which already has its styles defined, to get it to use Compass?
Much of the refactoring work is the same with or without Compass and you'll see the benefits that Sass offers sooner than those of Compass.
Compass creator Chris Eppstein did a write-up of how he went about refactoring digg's CSS. To sum up:
Extract partials. You're well on your way with this one, since you already have separate stylesheets for different functionality. Go further and pull out independent sets of rules to make them easier to manage and break down the refactoring project into smaller steps.
Analyze styles. Look for repeating patterns and inheritance relationships in your new partials. Wherever you have selector duplication could be a good place to start the next step.
Extract base classes. This is where you DRY up your CSS with #extend. Pull out duplicated declarations into a base class and extend.
Apply nesting. Nesting is a great Sass feature to make your stylesheets easier to read.
Extract mixin. If you found common styling patterns in step 2, this is the time to extract them into mixins.
Now you can really start taking advantage of Compass and its reusable patterns. Familiarity with the Compass documentation will help to identify which of the mixins are applicable to your project.
Is there a CSS minifier tool that can resolve #import statements?
I'd like to be able to load multiple CSS files on my local machine but have them all resolved into one file when the website gets pushed out into production.
I recently started using LESS, beyond imports allows you to use:
Variables
Mixins
Parametric Mixins
Nested rules
Operations
Color functions
Namespaces
Scope
Comments
Escaping
So far I'm glad with my experience using LESS.
It's easy to use and the page is documented with good examples.
You can use SASS, with the SCSS syntax. SASS is much more than a minifier: it is actually a CSS preprocessor which adds some goodies like variables or macros to the CSS syntax. But you can choose to simply ignore these features (although I advise you to have a look): any valid CSS file is actually valid SCSS.
SASS can then compile your SCSS in valid CSS, and it can manage multiple files and output a single minified .css file.
You can try it just as a minification tool for now, and start using the advanced features when you feel like experimenting.
css-compressor (based on yuicompressor) inlines #import statements - in fact that is its primary purpose:
https://github.com/samilyak/css-compressor
Granule library supports #import in CSS.
You can look it here http://code.google.com/p/granule/