Hướng dẫn why css-in-js - tại sao css-in-js
|
Thinking in components — Bạn sẽ không còn phải maintain 1 đống style-sheets nữa. CSS-in-JS sẽ trích xuất model CSS theo level component, thay vì theo level document (modularity). Bạn sẽ không còn phải maintain 1 đống style-sheets nữa. CSS-in-JS sẽ trích xuất model CSS theo level component, thay vì theo level document (modularity). Show Ví dụ về Styled React ComponentNhiều khả năng là bạn đã nghe đến những thuật ngữ như CSS-in-JS, Styled Components, Radium, Aphrodite & tự hỏi “tại sao lại có thứnày nữa?—Tôi đã & đang rất hài lòng với CSS-in-CSS (CSS trong .css)”CSS-in-JS, Styled Components, Radium, Aphrodite & tự hỏi “tại sao lại có thứ này nữa?—Tôi đã & đang rất hài lòng với CSS-in-CSS (CSS trong .css)” CSS-in-JS là 1 topic nhạy cảm, gây nhiều tranh cãi, được xem là concept tốt nhất giúp bạn không cần phải maintain folder chứa đầy các stylesheet.  Xem qua CSS-in-JS. CSS-in-JS là gì?
Nhớ rằng Inline styles & CSS-in-JS không giống nhau! Chúng hoàn toàn khác nhau !Inline styles & CSS-in-JS không giống nhau! Chúng hoàn toàn khác nhau ! Cách thức hoạt động của Inline Stylesconst textStyles = {
color: white,
backgroundColor: black
}
Trong hệ điều hành, việc này sẽ dính vào DOM node như thế này:
Cách thức hoạt động của CSS-in-JSimport styled from 'styled-components'; const Text = styled.div` color: white, background: black ` Trong browser, đoạn code này sẽ attach với DOM như thế này:
Sự khác biệtBạn có nhận ra sự khác biệt nào không? CSS-in-JS gắn tag 0 ở phần trên của DOM trong khi inline styles chỉ gắn properties vào DOM node. Tại sao việc này lại quan trọng? Không phải tất cả các tính năng CSS đều có thể ẩn danh trước event handlers của Javascript, nhiều selectors ngụy tạo (như inline style! inline style! inline style! inline style! inline style! inline style! inline style! inline style! inline style! inline style! Với CSS-in-JS, bạn nắm giữ hết mọi quyền năng của CSS trong lòng bàn tay. Vì CSS đã được generate, bạn có thể sử dụng mọi truy vấn media & selector ngụy tạo mà bạn có thể nghĩ đến. Một vài thư viện (như inline style! inline style! 6, 7) thậm chí còn hỗ trợ các tính năng không thuộc CSS là nesting! Bài viết trong link sau sẽ giải thích chi tiết hơn về điểm khác biệt “Chỉ cần viết CSS in CSS và xong!” Đúng vậy— tuy trường hợp này đã xảy ra từ lâu rồi nhưng thách thức đặt ra lúc này chính là modern web được viết bằng components, không phải pages.thách thức đặt ra lúc này chính là modern web được viết bằng components, không phải pages. CSS chưa bao giờ phù hợp với các giải pháp bằng component. CSS-in-JS sẽ thực sự giải quyết được vấn đề này. Vue cũng là 1 giải pháp khác dù styles của Vue không tiếp cận với components state.CSS-in-JS sẽ thực sự giải quyết được vấn đề này. Vue cũng là 1 giải pháp khác dù styles của Vue không tiếp cận với components state. Lợi ích của việc sử dụng CSS-in-JS là gì?
Bất lợi của CSS-in-JS?
Vì các điểm mạnh vẫn vượt trội điểm yếu nên hãy thử CSS-in-JS xem sao nhé! Chẳng có gì để mất!Chẳng có gì để mất! Các thư viện CSS-in-JS phổ biến nhấtStyled Componentsimport React, { Component } from 'react';
import styled from 'styled-components';
const Title = styled.h2`
color: white;
`;
const Wrapper = styled.div`
background: black
`
class App extends Component {
render() {
return (
JSS-Reactimport React from 'react'
import injectSheet from 'react-jss'
const styles = {
wrapper: {
background: 'black'
},
title: {
color: 'white'
}
}
const App = ({classes}) => (
glamorousimport React from 'react'
import glamorous from 'glamorous'
const Wrapper = glamorous.div({
backgroundColor: 'black'
})
const Title = glamorous.h2({
color: 'white'
})
const App = () => (
Radium (caveat: uses inline styles)import React, { Component } from 'react';
import Radium from 'radium';
@Radium // decorator
class App extends Component {
render() {
const styles = {
wrapper: {
background: 'blue',
}
title: {
color: 'white'
}
};
return (
Lưu ý: Radium sử dụng decorators! Aphroditeimport React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';
const styles = StyleSheet.create({
wrapper: {
backgroundColor: 'red'
},
title: {
backgroundColor: 'blue'
}
});
class App extends Component {
render() {
return (
Stylotronimport React, { Component } from 'react';
import { styled } from 'styletron-react';
const Wrapper = styled('div', {
backgroundColor: 'black'
})
const Title = styled('h2', {
color: 'white'
})
class App extends Component {
render() {
return (
|