I get it now—CSS and HTML in JS
Before continuing I need to admit another embarrassment. I have no experience with React, CSS in JS, or styled-components. None whatsoever. The difference now is I am able to wrap my head around it, this year—two thousand seventeen.
I work alongside Designers Who Occasionally Code™. I reason they choose to code because front-end mentors are available to provide an assist. We watch them struggle at BEM, naming, cascade, specificity, Git, and CLI commands. Occasionally we find them editing the wrong file. Coding is hard.
Design is easy. Well, I guess I always found it relaxing. Within months of becoming a front-end developer it dawned on me that I was a freshman coder. My resume leaned towards junior. That was a slight fib. Oops.
- The front-end developer builds a system—Grunt, Gulp, whatever.
// Create a Title component that’ll render an <h1> tag with some styles
const Title = styled.h1`
// Create a Wrapper component that’ll render a <section> tag with some styles
const Wrapper = styled.section`
// Use Title and Wrapper like any other React component — except they’re styled!
Hello World, this is my first styled component!
- The developer automates class selector creation. Web designers focus on semantics—when to use a div, where to use a heading element.
- The developer sets a baseline for specificity to counter competing and global styles created by other teams. It’s automated.
- Class selectors are dynamically added to HTML elements. Cascade, spelling mistakes, and class selector mishap will not be a concern for web designers. Styling ID selectors won’t happen.
- The system outputs optimized code and flags accessibility issues. ADA 101 is introduced early to web designers and performance training can be postponed for a later date since it’s automated.