CSS Direction

[eliperelman]

We don't have any strong direction on CSS patterns and designs, so let's talk about preferences and ideas. Some initial thoughts:

• Plain CSS, LESS, or Sass? For what it's worth, Sass seems significantly more preferred than LESS.
• Bootstrap, Foundation, Semantic UI, Material Design, BlueprintJS, something else?
• Flexbox support?
• UI style guidance

Let the discussion begin :)

[eliperelman]

cc: @helfi92 @darkwing

[darkwing]

I have a hard time with large CSS frameworks because there's always a whole bunch of stuff we don't need or care about. IMO we should create our own basic base CSS file, containing likewise fonts and a standard header we use per project.

[helfi92]

To write efficient CSS, I think a selector naming guideline would be beneficial. BEM would be a good prospect. Also, if a rule has an ID, there shouldn't be more than one selector or else this might create specificity issues in the future.

[eliperelman]

IMO we should create our own basic base CSS file, containing likewise fonts and a standard header we use per project.

For a good CSS baseline, I think normalize.css is a great start. It's the same one in use by Bootstrap. I totally agree about starting to define some consistency in our UIs. I'd like to see this org also contain a collection of repos that are individual consumable components, in addition to full sites.

I have a hard time with large CSS frameworks because there's always a whole bunch of stuff we don't need or care about.

Not using a monolithic framework is a valid concern. Here are the tradeoffs I see:

Pros

• Consistent design of components
• Normalized CSS baseline
• Community familiarity

Cons

• Larger file size with potential bloat
• Using DSLs (like React's JSX) can sometimes be cumbersome to integrate or override style
• Keeps code for legacy browsers we may not care about in exchange for future features we do (like flexbox)

The first con could probably be mitigated with smarter optimization in Webpack with dead-code elimination, but not sure what work is done there in the CSS realm. @helfi92 is tackling that right now for our build work on neutrino.

To write efficient CSS, I think a selector naming guideline would be beneficial. BEM would be a good prospect.

That's possible; here is a good guide for BEM:

http://bradfrost.com/blog/post/css-architecture-for-design-systems

Also, Tachyons looks really interesting in the minimalist CSS realm that might address some concerns:

http://tachyons.io/

[eliperelman]

Also, if a rule has an ID, there shouldn't be more than one selector or else this might create specificity issues in the future.

I'm usually OK with having selectors with an ID as long as they either describe a single element, or they are used for scoping. Examples:

/* targeting single element */
#element { display: none; }
#element.active { display: block; }

/* scoping */
#header h1 { color: white; }
#main div > a { color: red; }
#footer a { color: grey; }

[helfi92]

For a good CSS baseline, I think normalize.css is a great start

normalize.css is awesome! We should use it :)

By the way, targeting a single element is definitely okay. My only worry comes with scoping. For example, with

section div .content { 
  background: blue;
}

#footer .content { 
  background: green;
}

the latter will always override the former even though it has fewer selectors. Also, normalize.css does not have rules with ID's. If we start using ID's, we might end up overriding some of those rules by accident.

[helfi92]

Actually, now that I look more closely, we shouldn't have a problem regarding specificity with normalize.css since they only use a single element in each of their CSS rules.

[helfi92]

Tachyons looks really interesting in the minimalist CSS realm that might address some concerns

Tachyons is great too. It will definitely make us write less CSS

[eliperelman]

I've been experimenting with https://github.com/threepointone/glamor and it seems pretty logical from a component-based development approach. I know it seems counter-intuitive from a historical standpoint, but for shareable React components, I think it works well for distributing.

[eliperelman]

I've been wanting to try emotion, seems like it works really well and addresses several runtime concerns for CSS-in-JS.