Somewhat Stylish

Transcript

1. Somewhat Stylish
2. CSS is crap • Terrible language generally. • Specificity is confusing. • Big files, 80% of which isn’t even used on any particular page. • LESS / SASS help some things, but make others worse.
3. Solution
4. Store CSS in Javascript {     button:  {       background-­‐color:  'red',       border-­‐radius:  '2px'     }   }  
5. Use React.js mixin /**    *  @jsx  React.DOM    */   var  React  =  require('react'),     ClassToStyleMixin  =  require('class-­‐to-­‐style');   var  Button  =  React.createClass({     mixins:  [ClassToStyleMixin]     render:  function()  {       return  (         <a  className={styles.button}>           {this.props.text}         </a>       );     }   });   module.exports  =  Button;  
6. Compiled HTML <a  style="background-­‐color:red;border-­‐radius:2px;">     Click  me!   </a>  
7. Good • No more Stylesheets. • Fine grained control over element’s styles. • Faster browser perfomance. • Only have what you need.
8. Not good • Uses inline styles. • Larger page size. • Lots of duplication. • More complex.