Stylesheet in Javascript - New Way of Component Based Styling

Styling pada Javascript

Styling dalam file javascript pasti sudah diketahui banyak programmer, terutama programmer yang menggunakan React. Hal ini memberikan kita banyak keuntungan dari hal-hal seperti CSS pre-processor (variables, mixins, and functions). Hal ini juga mengatasi banyak masalah yang dimiliki CSS seperti global namespacing dan styling conflicts.

Penulisan Styling pada Javascript

Kita tidak membutuhkan bahasa khusus atau sintaks untuk mendefinisikan styles. Berbeda dengan CSS yang menggunakan - untuk properti styling yang terdiri dari 2 kata atau lebih, styling pada Javascript menggunakan camel casing, sehingga penulisan seperti background-color akan menjadi backgroundColor.

Terkadang jika file style dilakukan dalam satu file dengan component, diperlukan import StyleSheet dan gunakan StyleSheet.create untuk men-define beberapa styles dalam satu tempat. It's often cleaner to writing code.

Pada artikel ini saya akan membahas bagaimana men-define style menggunakan constant dan penggunaanya.

Define Typography dengan Constant

Katakanlah kita membuat aturan baku untuk menentukan ukuran font di suatu file javascript bernama Fonts.js sebagai berikut:

export const fontSize = {
	// heading
	displayLarge: '32px',
	displayMedium: '26px',
	displaySmall: '20px',
	heading: '18px',
	subheading: '16px',

	// body
	body: '17px',
	caption: '15px',
};

Nantinya file ini bisa di import pada file styling javascript lain yang membutuhkan font styling dengan cara sebagai berikut:

import { fontSize } from './Fonts'; //url path to Fonts.js

	textStyle = {
		//put another style here..
		fontSize: fontSize.displaySmall
	}

Selain ukuran font, masih banyak lagi font styling yang bisa kita define menggunakan const dalam Javascript, seperti fontFamily, fontWeight, lineHeight, dan font styling lainnya dengan nama sesuka kita. Semuanya dapat di-define dalam satu file dan melakukan export default untuk setiap const yang ada dalam file pada akhir baris. Sehingga menjadi seperti ini:

//Fonts.js
const size = {
	displayLarge: '32px',
	displayMedium: '26px',
	displaySmall: '20px',
	heading: '18px',
	subheading: '16px',
	body: '17px',
	caption: '15px',
};
conts weight = {
	thin: 100,
	normal: 300,
	bold: 700
};
const type = {
	light: 'Roboto-Light',
	medium: 'Roboto-Medium',
};
export default {
	size,
	weight,
	type
}

Hal ini dilakukan agar aplikasi yang kita buat mempunyai font styling yang konsisten dengan cara yang lebih praktis.

Define File Image/Another Source dengan Constant

Selain men-define typography, styling pada javascript bisa juga digunakan untuk men-define path url dari assets yang digunakan. Pada artikel ini saya memakai Images sebagai contoh:

//Images.js
export const Images = {
	history_empty_state: require('../Assets/Images/history-empty-state.png'),
	history_search_empty: require('../Assets/Images/search-not-found.png'),
	reconnect_animation: require('../Assets/Images/reconnect_modal_gif.gif')
}

Sama halnya dengan men-define typography, jika kita ingin memakai salah satu images yang ada, kita tinggal menulis Images.reconnect_animation pada props source dalam tag Images. Tentunya jangan lupa untuk mengimpor file Images.js terlebih dahulu.

Apa hanya direktori file dan typography saja yang dapat di-define? Tentu tidak, yang ada pada artikel ini hanya sebagian kecilnya. Sekarang teman-teman pembaca sudah mulai punya a new point of view about Styling in Javascript. All you have to do now is go out and experiment! :D

P.S. If you enjoyed this article, it would mean a lot if you clicked the 'thanks' and shared with friends.