CSS-in-JavaScript
This is the third of four articles I am writing during my 15-week Software Development bootcamp at Flatiron School, in downtown NYC. For each article, I will focus on a topic that directly relates to my learning at the present moment. The metacognitive benefits to myself are obvious, and I hope they may be useful resources to my peers as well. My first article was about setting up my own custom Visual Studio Code color settings environment. My second article was about my first time using the Ruby on Rails Resource Generator, which creates an instant Full-Stack MVC (Model–View–Controller) Web Framework (CRUD not included).
In this article, I will describe various methods for styling HTML pages, including my latest discovery, CSS styling executed dynamically from within a JavaScript file.
HTML with External CSS Style Sheet
First, let’s take a look at the most commonly used method for styling HTML, which many of you may already be familiar with, an external CSS stylesheet. The external CSS stylesheet contains all of the styling information for the HTML page, and is linked using the <link> element in the <head> section of the HTML file. In this case, the external CSS stylesheet is called mystyle.css.
HTML Internal Style Sheet
Another approach is to use an internal CSS stylesheet. Here, all of the styling for the HTML view is contained within the HTML file itself, using CSS syntax. Internal styles are defined within the <style> element, inside the <head> section of an HTML document.
HTML Inline Styling
Similar to this approach is inline styling, generally used for styling individual elements in an HTML document.
The DOM
A newer more interesting approach is made possible by the HTML DOM (Document Object Model). The DOM model is constructed as a tree of Objects.
The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents.“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”It defines:• The HTML elements as objects• The properties of all HTML elements• The methods to access all HTML elements• The events for all HTML elementsIn other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Changing CSS Dynamically in the DOM
With the object model, JavaScript can create dynamic HTML, including the ability to change all the HTML elements, including CSS styles, in the page dynamically. In the example below, the style of a <p> element is changed using the HTML <script> tag, some embedded JavaScript using the following syntax:
document.getElementById(id).style.property = new style
JavaScript Style Property Inline
Vanilla JavaScript files can make use of this new paradigm realignment. In the example below, I am using JavaScript’s style property to add styling inline on the element. As you can see, everything is handled by the JavaScript file, and the DOM is rendered dynamically.
JavaScript Style Property Globally
A similar approach is to add the styling globally, using CSS in the JavaScript file.
For a list of HTML DOM style properties, you can refer to MDN’s CSS Properties Reference.
Enter React
Thanks to the popular JavaScript library React, developed by Facebook, where rendering is handled by a Virtual DOM, CSS is usually defined as classes, and constructed inside components, within JavaScript JSX files. This CSS-in-JS approach refers to a pattern where CSS is composed using JavaScript instead of defined in external CSS files, or LESS/SASS preprocessor files. LESS/SASS, the primary CSS preprocessors available today, were invented to add capabilities to CSS by compiling a new programming language to CSS. Even though they are built using JavaScript/Ruby respectively, LESS/SASS can’t offer the modular, functional, object-oriented power, nor the streamlined benefits of CSS-in-JS in a React ecosystem.
What is a Virtual DOM?
The HTML DOM was never optimized for creating dynamic UI, especially now that many DOMs consist of thousands of nodes. A Virtual DOM is an abstraction of the HTML DOM. Rather than touching the DOM directly, it builds an abstract version of it. As a lightweight copy of the DOM, it quickly changes state, and is easily compared to previous versions.
According to the React webpage:
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
Why use components instead of external CSS stylesheets?
Again from the React webpage:
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.
The integration of rendering logic in React is handled by JSX files, a syntax extension to JavaScript. JSX files contain not only JavaScript components defined as classes and functions, but HTML markup, as well as CSS styling, all in one file! It’s just another example of how React has turned conventional logic on its head, all in the pursuit of better data flow, faster rendering, and more manageable dynamic full-stack web apps. Comparable to how React eschews the ubiquitous MVC design pattern, and instead insists on unidirectional data flow (Flux/REDUX), or the aforementioned Virtual DOM, React has reimagined how web apps should function. And created a highly dynamic environment to make it all possible.
