CSS-in-JS

تقنية CSS-in-JS هي أسلوب لتنسيق العناصر باستخدام جافا سكريبت . عند تحليل جافا سكريبت، يتم إنشاء CSS<style> (عادةً كعنصر <script>) وإضافته إلى DOM . تُمكّن هذه التقنية من تجريد CSS إلى مستوى العنصر نفسه، باستخدام جافا سكريبت لوصف الأنماط بطريقة تصريحية وقابلة للصيانة. توجد تطبيقات متعددة لهذا المفهوم في شكل مكتبات مثل:

• العاطفة ^{[ 1 ]}
• المكونات المصممة ^{[ 2 ]}
• JSS ^{[ 3 ]}

تتيح هذه المكتبات إنشاء مكونات مُنسّقة باستخدام قوالب نصية مُوسومة. على سبيل المثال، سيبدو استخدام المكونات المُنسّقة في مشروع React كما يلي:

import styled from 'styled-components' ; // إنشاء مكون يقوم بعرض عنصر <p> بنص أزرق const BlueText = styled . p `  color: blue; ` ;<BlueText> نصي الأزرق < / BlueText >​

بعض النتائج التي يمكن تحقيقها باستخدام CSS-in-JS لا يمكن الحصول عليها باستخدام تقنيات CSS التقليدية . من الممكن جعل الأنماط ديناميكية باستخدام بضعة عبارات شرطية فقط. كما يمكن للمبرمجين كتابة كود أكثر نمطية، حيث يتم تغليف CSS في نفس كتلة JavaScript الخاصة بالمبرمج، مما يحصر نطاقه في تلك الوحدة فقط.

يستخدم كل من Reddit و Patreon و Target و Atlassian و Vogue و GitHub و Coinbase تقنية CSS-in-JS . ^{[ 4 ]}