I get it now—CSS and HTML in JS

Do you remember the year cascade and specificity made sense? For me it was 2013, only weeks after switching from web designer to front-end developer. I’m embarrassed to mention that I have been coding since the late nineties. Today, the challenge with cascade and specificity is explaining it to web designers. I see them struggle. Some for years. I also see them struggle with JavaScript. If it takes them years to comprehend specificity and cascade it will take many more to understand functional programming and ES6. I want to speed up the process by flipping it. Here’s how…

Preface

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.

JavaScript is hard. Designers here work with JavaScript. I wouldn’t call them freshman JavaScript developers, more like 3rd graders. At 3rd grade level it’s possible to build exciting interactive experiences with borrowed code. They get excited when it works. Me too. Mostly, I’m ecstatic they are willing to give it a try. Most times they miss the bugs, performance, scaling, and accessibility issues that are bundled with it. If only they could wrap their heads around JavaScript sooner in their web design career.

Here’s how…

  • The front-end developer builds a system—Grunt, Gulp, whatever.
  • HTML and CSS are developed within JavaScript, e.g., style-components. Web designers learn JavaScript and atomic design from the outset.
// Create a Title component that’ll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a Wrapper component that’ll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use Title and Wrapper like any other React component — except they’re styled!
render(
<Wrapper>
<Title>
Hello World, this is my first styled component!
</Title>
</Wrapper>
);
  • The developer automates class selector creation. Web designers focus on semantics—when to use a div, where to use a heading element.
  • BEM, along with a naming convention, is automated. Naming and BEM training is replaced with JavaScript 101 classes.
  • 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.
  • Sass can be excluded. Web designers can create their own mixins and variables using vanilla JavaScript.
  • 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.

What you’re essentially doing is substituting the time and effort on naming, cascade, and specificity with learning JavaScript straightaway.

Summary

Web design was more forgiving long ago — We Didn’t Know Better™. Today it takes a Browser Scientist™ to understand the browser and the medium. If your team is capable of building a system that simplifies development, consider introducing HTML and CSS in JavaScript to your web designers. I plan to.