Modular Stylesheets with Css Modules (Dublin CSS)
- 2. Writing Modular Stylesheets With CSS Modules www.katiefenn.co.uk/scotland-css-2016/
- 4. www.katiefenn.co.uk/scotland-css-2016/ NASA / Apollo 17 Crew Global Scope
- 7. @Katie_Fenn
- 8. @Katie_Fenn
- 12. Unique Classes /* Source file */ .input { height: 30px; } www.katiefenn.co.uk/scotland-css-2016/ #DZY
- 15. Unique Classes /* Processed file */ ._input_lg8gg_6 { height: 30px; } lg8gg_6 The plugin makes classes unique www.katiefenn.co.uk/scotland-css-2016/ #DZY
- 17. Global Classes /* Source file */ :global .background { color: white; font-family: Arial; } :global www.katiefenn.co.uk/scotland-css-2016/ #DZY
- 18. Global Classes /* Source file */ :global .background { color: white; font-family: Arial; } :global :global makes classes work normally www.katiefenn.co.uk/scotland-css-2016/ #DZY
- 21. Global Classes /* Processed file */ .background { color: white; font-family: Arial; } www.katiefenn.co.uk/scotland-css-2016/ .background :global makes CSS work normally #DZY
- 23. Map File /* json map file */ { "input":"_input_lg8gg_6", } _input_lg8gg_6input Maps unique classes… …back to the original www.katiefenn.co.uk/scotland-css-2016/ #DZY
- 24. var styles = require('./TextField.styles.css'); var TextField = React.createClass({ render() { return ( <div> <input className={ styles.input } /> </div>) ; } }); var styles = require('./TextField.styles.css'); class TextField extends React.Component { render() { return ( <div> <input className={ styles.input } /> </div>) ; } } Unique Classes www.katiefenn.co.uk/lead-dev-2016/
- 25. var styles = require('./TextField.styles.css'); var TextField = React.createClass({ render() { return ( <div> <input className={ styles.input } /> </div>) ; } }); var styles = require('./TextField.styles.css'); class TextField extends React.Component { render() { return ( <div> <input className={ styles.input } /> </div>) ; } } Load classes from map file… …to inject unique classes into templates Unique Classes www.katiefenn.co.uk/lead-dev-2016/
- 26. Composable Styles /* Source file */ .input { composes: shared from “../shared.css” } composes: shared from “../shared.css” www.katiefenn.co.uk/scotland-css-2016/ #DZY
- 27. Composable Styles /* Source file */ .input { composes: shared from “../shared.css” } composes: shared from “../shared.css” www.katiefenn.co.uk/scotland-css-2016/ composes styles from other rules or modules #DZY
- 28. Composable Styles composes: shared from “../shared.css” www.katiefenn.co.uk/scotland-css-2016/ #DZY
- 30. Composable Styles // json map File { “input": "_input_1j141_6 _shared_1g7is_2" } _input_1j141_6 _shared_1g7is_2 compose adds the included class… …anywhere the including class is used www.katiefenn.co.uk/scotland-css-2016/ #DZY
- 31. Composable Styles /* Source file */ .input { composes: pa1 ma1 black-60 from global; } www.katiefenn.co.uk/scotland-css-2016/ compose from global frameworks like Tachyons composes: pa1 ma1 black-60 from global
- 32. Asset Management /* Source file */ .icon { background: url(./twitter.png); } www.katiefenn.co.uk/scotland-css-2016/ url(./twitter.png);
- 33. Asset Management /* Source file */ .icon { background: url(./twitter.png); } www.katiefenn.co.uk/scotland-css-2016/ css modules resolves paths to images url(./twitter.png);
- 36. Asset Management /* Processed file */ .icon { background: url(img/fdfc448bda4857.png); } www.katiefenn.co.uk/scotland-css-2016/
- 57. Quirks • No cross-module selectors • Only id and class selectors • Composition requires class or id www.katiefenn.co.uk/scotland-css-2016/
- 61. Alternatives • Inline styles in React • Radium • Aphrodite • Styled Components 💅 www.katiefenn.co.uk/scotland-css-2016/
- 62. “The component is the unit of re-use” Glen Mailer www.katiefenn.co.uk/scotland-css-2016/ https://www.missguided.co.uk
- 63. #DZY