CSS-in-JS

Last updated

CSS-in-JS is a styling technique by which JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a <style> element) and attached into the DOM. It enables the abstraction of CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way. There are multiple implementations of this concept in the form of libraries such as

These libraries allow the creation of styled components using tagged template literals. For example, using styled components in a React project would look like the following:

importstyledfrom'styled-components';// Create a component that renders a <p> element with blue textconstBlueText=styled.p`  color: blue;`;<BlueText>Mybluetext</BlueText>

Some outcomes that may be achieved through CSS-in-JS can not be obtained using traditional CSS techniques. It is possible to make the styles dynamic in line with just a few conditional statements. Programmers may also write more modular code, with CSS being encapsulated in the same block as the programmer's JavaScript, scoping it to that module only.

Industry use

CSS-in-JS is used by Reddit, Patreon, Target, Atlassian, Vogue, GitHub and Coinbase. [4]

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

Minification is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute. Minification reduces the size of the source code, making its transmission over a network more efficient. In programmer culture, aiming at extremely minified source code is the purpose of recreational code golf competitions.

In HTML, div and span tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as p (paragraph), em (emphasis), and so on, accurately represent the semantics of the content, the additional use of span and div tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, span and div can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several core CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of Aug 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least 3 to 4 times more usage than any other JavaScript library.

A JavaScript library is a library of pre-written JavaScript code that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.

<span class="mw-page-title-main">Ext JS</span> JavaScript application framework

Ext JS is a JavaScript application framework for building interactive cross-platform web applications using techniques such as Ajax, DHTML and DOM scripting. It can be used as a simple component framework but also as a full framework for building single-page applications (SPAs).

Midori is a lightweight JavaScript library. It is intended to make JavaScript web development easier. It was created by Aycan Gulez and hasn't been updated since June 2010. The website was down in November 2018, then since August 2019, it turned into various unrelated Japanese websites.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Modernizr is a JavaScript library that detects the features available in a user's browser. This lets web pages avoid unsupported features by informing the user their browser isn't supported or loading a polyfill. Modernizr aims to provide feature detection in a consistent and easy to use manner that discourages the use of failure-prone browser sniffing.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end framework

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards. It is the successor to the earlier Protovis framework. Its development was noted in 2011, as version 2.0.0 was released in August 2011. With the release of version 4.0.0 in June 2016, D3 was changed from a single library into a collection of smaller, modular libraries that can be used independently.

Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.

Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements. Web Components are popular approach to build microfrontend.

<span class="mw-page-title-main">React (software)</span> JavaScript library for building user interfaces

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies.

<span class="mw-page-title-main">Polymer (library)</span> Open-source JavaScript library of Web Components

Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript framework for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

References

  1. ↑ "Emotion - Introduction". emotion.sh. Retrieved 2019-07-03.
  2. ↑ styled-components. "styled-components". styled-components. Retrieved 2019-07-03.
  3. ↑ "JSS". cssinjs.org. Retrieved 2019-07-03.
  4. ↑ "A Detailed Explanation of CSS-in-JS". Alibaba Cloud Community. Retrieved 2023-07-05.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.