Get in-line!

bucharest_frontend_meetup_6

lightning talks

Antal Andrei

KALON

Christopher Chedeau (@vjeux)

Facebook...React...other cool stuff

React: CSS in your JS (NationJS 2014) - about a year ago

https://vimeo.com/116209150

Problems with CSS

  1. Global namespace
  2. Dependencies
  3. Dead code elimination
  4. Minification
  5. Sharing constants
  6. Non-deterministic resolution
  7. Isolation

Problems with CSS

CSS was created to provide a better tool for developers to control the styling of HTML elements

CSS in JS

CSS in JS

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, 
    mountNode);

React inline styles

React Radium

import color from 'color';

// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
  base: {
    color: '#fff',
    // pseudo-classes (:hover, :focus, :active, or @media)
    ':hover': {
      background: color('#0074d9').lighten(0.2).hexString()
    }
  },

  primary: {
    background: '#0074D9'
  },

  warning: {
    background: '#FF4136'
  }
};

The styles object

React Radium

import Radium from "radium";
import React from "react";

@Radium
class Button extends React.Component {
  static propTypes = {
    kind: React.PropTypes.oneOf(["primary", "warning"]).isRequired
  };

  render() {
    return (
      <button
        style={[
          styles.base,
          styles[this.props.kind]
        ]}>
        {this.props.children}
      </button>
    );
  }
}

The @Radium decorator

React inline styles libraries comparisson

CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

CSS Modules compile to a low-level interchange format called ICSS or Interoperable CSS, but are written like normal CSS files

When importing the CSS Module from a JS Module, it exports an object with all mappings from local names to global names

CSS Modules

/* components/submit-button.css */
.Button { /* all styles for Normal */ }
.Button--disabled { /* overrides for Disabled */ }
.Button--error { /* overrides for Error */ }
.Button--in-progress { /* overrides for In Progress */
<!-- Apply styles to button -->
<button class="Button Button--in-progress">Processing...</button>

Classic CSS BEM way

/* components/submit-button.css */
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */
/* components/submit-button.js */
import styles from './submit-button.css';

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

Scoping - CSS Modules way

CSS Modules


<button class="components_submit_button__normal__abc5436">
  Processing...
</button>

Scoping - The result

CSS Modules

// webpack.config.js

config.loaders.push(
    ...
    { test: /\.css$/, loader: 'style-loader!css-loader?modules
            &localIdentName=[name]__[local]___[hash:base64:5]' })
    ...);

Easy to configure (Webpack example)

CSS Modules

.common {
  /* all the common styles you want */
}
.normal {
  composes: common;
  /* anything that only applies to Normal */
}
.disabled {
  composes: common;
  /* anything that only applies to Disabled */
}
.error {
  composes: common;
  /* anything that only applies to Error */
}
.inProgress {
  composes: common;
  /* anything that only applies to In Progress */
}

Composition

CSS Modules

/* colors.css */
.primary {
  color: #720;
}
.secondary {
  color: #777;
}
/* other helper classes... */

Sharing styles

/* submit-button.css */
.common { /* font-sizes, padding, border-radius */ }
.normal {
  composes: common;
  composes: primary from "../shared/colors.css";
}

CSS Modules

.element {
  composes: large from "./typography.css";
  composes: dark-text from "./colors.css";
  composes: padding-all-medium from "./layout.css";
  composes: subtle-shadow from "./effect.css";
}

Single responsibility module

Separation of concerns

the dogma

SRUCTURE

PRESENTATION

BEHAVIOUR

Component based architecture

true separation of concerns

Thank you!

fb/antal.a.andrei

@andrei_antal

Other stuff to look at

frontend-meetup-6_get-inline

By Andrei Antal

Made with Slides.com

frontend-meetup-6_get-inline

Bucharest Frontend #6 meetup Lightning talk. Get in-line, a talk about the future of web styling.

  • 1,364

More from Andrei Antal