Làm cách nào để thêm kiểu CSS trong JavaScript?

Question

Chào mừng bạn đến với một chủ đề cực kỳ gây tranh cãi trong lĩnh vực phát triển front-end. Tôi chắc chắn rằng phần lớn các bạn đang đọc phần này đã gặp phải chia sẻ công bằng của bạn về #hotdrama xung quanh cách CSS nên được xử lý trong một ứng dụng JavaScript

Nội dung chính Show

Hãy để chúng tôi dẫn đường
Làm cách nào để thêm kiểu CSS bằng JavaScript?
Bạn có thể tạo kiểu JavaScript bằng CSS không?

Tôi muốn mở đầu bài đăng này với tuyên bố từ chối trách nhiệm. Không có quy tắc cứng và nhanh nào thiết lập một phương pháp xử lý CSS trong ứng dụng React, Vue hoặc Angular là vượt trội. Mỗi dự án đều khác nhau và mọi phương pháp đều có giá trị của nó. Điều đó có vẻ mơ hồ, nhưng những gì tôi biết là cộng đồng phát triển mà chúng tôi đang tồn tại có rất nhiều người không ngừng tìm kiếm thông tin mới và tìm cách thúc đẩy web phát triển theo những cách có ý nghĩa

Đặt các định kiến về chủ đề này sang một bên, chúng ta hãy nhìn vào thế giới hấp dẫn của kiến trúc CSS

Hãy để chúng tôi dẫn đường

Chỉ cần tìm kiếm trên Google “Cách thêm CSS vào [chèn khung tại đây]” sẽ tạo ra một loạt các niềm tin và quan điểm vững chắc về cách áp dụng các kiểu cho một dự án. Để cố gắng giúp loại bỏ một số tiếng ồn, hãy xem xét một số phương pháp được sử dụng phổ biến hơn ở cấp độ cao, cùng với mục đích của chúng

lựa chọn 1. Một bản định kiểu dang ol

Chúng ta sẽ bắt đầu với cách tiếp cận quen thuộc. một bản định kiểu dang ol. Chúng tôi hoàn toàn có thể <link> tới một biểu định kiểu bên ngoài trong ứng dụng của mình và gọi nó là một ngày

<link rel="stylesheet" href="styles.css">

Chúng ta có thể viết CSS bình thường mà chúng ta đã quen và tiếp tục cuộc sống của mình. Điều đó không có gì sai cả, nhưng khi một ứng dụng trở nên lớn hơn và phức tạp hơn, việc duy trì một biểu định kiểu sẽ ngày càng khó hơn. Việc phân tích hàng nghìn dòng CSS chịu trách nhiệm tạo kiểu cho toàn bộ ứng dụng của bạn trở thành một nỗi đau đối với bất kỳ nhà phát triển nào làm việc trong dự án. Cascade cũng là một thứ đẹp đẽ, nhưng nó cũng trở nên khó quản lý theo nghĩa là một số kiểu mà bạn — hoặc các nhà phát triển khác trong dự án — viết sẽ đưa hồi quy vào các phần khác của ứng dụng. Chúng tôi đã gặp những sự cố này trước đây và những thứ như Sass (và PostCSS gần đây hơn) đã được giới thiệu để giúp chúng tôi xử lý những sự cố này

Chúng ta có thể tiếp tục đi theo con đường này và sử dụng sức mạnh tuyệt vời của PostCSS để viết các phần CSS rất mô-đun được xâu chuỗi lại với nhau thông qua các quy tắc @import. Điều này đòi hỏi một chút công việc trong cấu hình webpack để được thiết lập đúng cách, nhưng chắc chắn bạn có thể xử lý một số thứ

Bất kể bạn quyết định sử dụng (hoặc không sử dụng) trình biên dịch nào vào cuối ngày, bạn sẽ cung cấp một tệp CSS chứa tất cả các kiểu cho ứng dụng của bạn thông qua thẻ <link> trong tiêu đề. Tùy thuộc vào độ phức tạp của ứng dụng đó, tệp này có khả năng trở nên khá cồng kềnh, khó tải không đồng bộ và chặn hiển thị cho phần còn lại của ứng dụng của bạn. (Chắc chắn, chặn hiển thị không phải lúc nào cũng xấu, nhưng đối với tất cả ý định và mục đích, chúng tôi sẽ khái quát một chút ở đây và tránh các tập lệnh và kiểu chặn hiển thị bất cứ khi nào có thể. )

Điều đó không có nghĩa là phương pháp này không có giá trị của nó. Đối với ứng dụng nhỏ hoặc ứng dụng được xây dựng bởi một nhóm ít tập trung vào giao diện người dùng hơn, một biểu định kiểu duy nhất có thể là lựa chọn tốt. Nó cung cấp sự tách biệt rõ ràng giữa logic nghiệp vụ và kiểu ứng dụng, và bởi vì nó không được tạo ra bởi ứng dụng của chúng tôi nên hoàn toàn nằm trong tầm kiểm soát của chúng tôi để đảm bảo chính xác những gì chúng tôi viết là chính xác những gì được xuất ra. Ngoài ra, một tệp CSS duy nhất khá dễ dàng để trình duyệt lưu vào bộ đệm, do đó, người dùng cũ không phải tải xuống lại toàn bộ tệp trong lần truy cập tiếp theo của họ

Nhưng giả sử rằng chúng tôi đang tìm kiếm thêm một chút kiến trúc CSS mạnh mẽ cho phép chúng tôi tận dụng sức mạnh của công cụ. Một cái gì đó để giúp chúng tôi quản lý một ứng dụng đòi hỏi một cách tiếp cận sắc thái hơn một chút. Nhập mô-đun CSS

Lựa chọn 2. Mô-đun CSS

Một vấn đề khá lớn trong một biểu định kiểu duy nhất là nguy cơ hồi quy. Viết CSS sử dụng bộ chọn khá không cụ thể có thể sẽ thay đổi thành phần khác trong một khu vực hoàn toàn khác trong ứng dụng của bạn. Đây là lúc một cách tiếp cận được gọi là “kiểu có phạm vi” trở nên hữu ích

Các kiểu có phạm vi cho phép chúng tôi tạo các tên lớp cụ thể theo chương trình cho một thành phần. Do đó, phạm vi các kiểu đó cho thành phần cụ thể đó, đảm bảo rằng tên lớp của chúng sẽ là duy nhất. Điều này dẫn đến các tên lớp được tạo tự động như header__2lexd. Bit ở cuối là một bộ chọn băm duy nhất, vì vậy ngay cả khi bạn có một thành phần khác có tên là tiêu đề, bạn có thể áp dụng một lớp tiêu đề cho nó và các kiểu có phạm vi của chúng tôi sẽ tạo ra một hậu tố băm mới như vậy. header__15qy_

Mô-đun CSS cung cấp các cách, tùy thuộc vào cách triển khai, để kiểm soát tên lớp đã tạo, nhưng tôi sẽ để điều đó cho tài liệu Mô-đun CSS để đề cập đến điều đó

Khi tất cả đã được nói và làm xong, chúng tôi vẫn đang tạo một tệp CSS duy nhất được gửi tới trình duyệt thông qua thẻ <link> trong tiêu đề. Điều này đi kèm với những nhược điểm tiềm ẩn tương tự (chặn kết xuất, kích thước tệp phình to, v.v. ) và một số lợi ích (chủ yếu là bộ nhớ đệm) mà chúng tôi đã đề cập ở trên. Nhưng phương pháp này, vì mục đích xác định phạm vi các kiểu, đi kèm với một cảnh báo khác. việc loại bỏ phạm vi toàn cầu - ít nhất là ban đầu

Hãy tưởng tượng bạn muốn sử dụng lớp toàn cầu

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

1 có thể được áp dụng cho bất kỳ thành phần nào trong ứng dụng của bạn. Nếu sử dụng Mô-đun CSS, bạn phải tiếp cận bộ chọn giả

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

2 xác định rõ ràng CSS bên trong nó là thứ được phép truy cập toàn cầu bởi các thành phần khác trong ứng dụng. Miễn là bạn nhập biểu định kiểu bao gồm khối khai báo

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

2 của mình vào biểu định kiểu của thành phần, bạn sẽ có quyền sử dụng bộ chọn chung đó. Không phải là một nhược điểm lớn, nhưng một cái gì đó cần phải làm quen

Đây là một ví dụ về bộ chọn giả

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

2 đang hoạt động

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

Bạn có thể gặp rủi ro khi bỏ cả đống bộ chọn chung cho kiểu chữ, biểu mẫu và chỉ các yếu tố chung mà hầu hết các trang web có vào một bộ chọn duy nhất

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

2. May mắn thay, thông qua sự kỳ diệu của những thứ như PostCSS Nested hoặc Sass, bạn có thể nhập trực tiếp các bộ phận vào bộ chọn để làm cho mọi thứ rõ ràng hơn một chút

// main.scss
:global {
  @import "typography";
  @import "forms";
}

Bằng cách này, bạn có thể viết các phần của mình mà không cần bộ chọn

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

2 và chỉ cần nhập chúng trực tiếp vào biểu định kiểu chính của bạn

Một điểm khác cần làm quen là cách các tên lớp được tham chiếu trong các nút DOM. Tôi sẽ để các tài liệu riêng lẻ về , React và Angular tự nói ở đó. Tôi cũng sẽ để lại cho bạn một ví dụ nhỏ về giao diện của các tham chiếu lớp đó được sử dụng trong một thành phần React.

// ./css/Button.css

.btn {
  background-color: blanchedalmond;
  font-size: 1.4rem;
  padding: 1rem 2rem;
  text-transform: uppercase;
  transition: background-color ease 300ms, border-color ease 300ms;

  &:hover {
    background-color: #000;
    color: #fff;
  }
}

// ./Button.js

import styles from "./css/Button.css";

const Button = () => (
  <button className={styles.btn}>
    Click me!
  </button>
);

export default Button;

Một lần nữa, phương thức Mô-đun CSS có một số trường hợp sử dụng tuyệt vời. Đối với các ứng dụng muốn tận dụng lợi thế của các kiểu có phạm vi trong khi vẫn duy trì các lợi ích về hiệu suất của biểu định kiểu tĩnh nhưng được biên dịch, thì các Mô-đun CSS có thể phù hợp với bạn

Điều đáng chú ý ở đây là các Mô-đun CSS có thể được kết hợp với hương vị tiền xử lý CSS yêu thích của bạn. Sass, Ít hơn, PostCSS, v.v. đều có thể được tích hợp vào quy trình xây dựng bằng cách sử dụng Mô-đun CSS

Nhưng giả sử ứng dụng của bạn có thể hưởng lợi từ việc được đưa vào JavaScript của bạn. Có lẽ việc truy cập vào các trạng thái khác nhau của các thành phần của bạn và phản ứng dựa trên trạng thái thay đổi cũng sẽ có lợi. Giả sử bạn cũng muốn dễ dàng kết hợp CSS quan trọng vào ứng dụng của mình. Nhập CSS-in-JS

Tùy chọn 3. CSS-in-JS

CSS-in-JS là một chủ đề khá rộng. Có một số gói hoạt động để làm cho việc viết CSS-in-JS trở nên dễ dàng nhất có thể. Các khung như JSS, Cảm xúc và Thành phần được tạo kiểu chỉ là một vài trong số nhiều gói bao gồm chủ đề này

Như một lời giải thích chung cho hầu hết các khung này, CSS-in-JS phần lớn hoạt động theo cùng một cách. Bạn viết CSS được liên kết với thành phần riêng lẻ của mình và quy trình xây dựng của bạn sẽ biên dịch ứng dụng. Khi điều này xảy ra, hầu hết các khung CSS-in-JS sẽ chỉ xuất CSS được liên kết của các thành phần được hiển thị trên trang tại bất kỳ thời điểm nào. Các khung CSS-in-JS thực hiện điều này bằng cách xuất CSS đó trong thẻ

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

7 trong

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

8 của ứng dụng của bạn. Điều này cung cấp cho bạn một chiến lược tải CSS quan trọng vượt trội. Ngoài ra, giống như Mô-đun CSS, các kiểu được sắp xếp theo phạm vi và tên lớp được băm

Khi bạn điều hướng xung quanh ứng dụng của mình, các thành phần chưa được gắn sẽ bị xóa kiểu khỏi

// typography.css
:global {
  .aligncenter {
    text-align: center;
  }
  .alignright {
    text-align: right;
  }
  .alignleft {
    text-align: left;
  }
}

8 và các thành phần đến được gắn sẽ có kiểu được thêm vào vị trí của chúng. Điều này tạo cơ hội cho lợi ích hiệu suất trên ứng dụng của bạn. Nó xóa một yêu cầu HTTP, nó không hiển thị chặn và nó đảm bảo rằng người dùng của bạn chỉ tải xuống những gì họ cần để xem trang tại bất kỳ thời điểm nào

Một cơ hội thú vị khác mà CSS-in-JS cung cấp là khả năng tham chiếu các trạng thái và hàm thành phần khác nhau để hiển thị các CSS khác nhau. Điều này có thể đơn giản như sao chép chuyển đổi lớp dựa trên một số thay đổi trạng thái hoặc phức tạp như thứ gì đó như chủ đề

Bởi vì CSS-in-JS là một chủ đề khá #hotdrama, tôi nhận ra rằng có rất nhiều cách khác nhau mà mọi người đang cố gắng giải quyết vấn đề này. Bây giờ, tôi chia sẻ cảm xúc của nhiều người khác, những người đánh giá cao CSS, đặc biệt là khi nói đến việc tận dụng JavaScript để viết CSS. Phản ứng ban đầu của tôi đối với phương pháp này khá tiêu cực. Tôi không thích ý tưởng lây nhiễm chéo cả hai. Nhưng tôi muốn giữ một tâm trí cởi mở. Hãy xem xét một số tính năng mà chúng tôi với tư cách là nhà phát triển tập trung vào mặt trước sẽ cần để xem xét phương pháp này

Nếu viết CSS-in-JS, chúng ta phải viết CSS thật. Một số gói cung cấp các cách để viết CSS theo nghĩa đen của mẫu, nhưng yêu cầu bạn viết trường hợp lạc đà cho các thuộc tính của mình — i. e.
```
// main.scss
:global {
  @import "typography";
  @import "forms";
}
```
0 trở thành
```
// main.scss
:global {
  @import "typography";
  @import "forms";
}
```
1. Đó không phải là thứ mà cá nhân tôi sẵn sàng hy sinh
Một số giải pháp CSS-in-JS yêu cầu bạn viết các kiểu nội tuyến của mình trên phần tử mà bạn đang cố gắng tạo kiểu. Cú pháp cho điều đó, đặc biệt là trong các thành phần phức tạp, bắt đầu trở nên rất bận rộn và một lần nữa tôi không sẵn sàng hy sinh
Việc sử dụng CSS-in-JS phải cung cấp cho tôi các công cụ mạnh mẽ mà nếu không thì rất khó thực hiện với các Mô-đun CSS hoặc biểu định kiểu dang ol’
Chúng ta phải có khả năng tận dụng CSS tiên tiến như lồng nhau và các biến. Chúng tôi cũng phải có khả năng kết hợp những thứ như Autoprefixer và các tiện ích bổ sung khác để nâng cao trải nghiệm của nhà phát triển

Có rất nhiều yêu cầu đối với một khuôn khổ, nhưng đối với những người trong chúng ta, những người đã dành phần lớn cuộc đời để nghiên cứu và thực hiện các giải pháp xung quanh một ngôn ngữ mà mình yêu thích, chúng ta phải đảm bảo rằng mình có thể tiếp tục viết ngôn ngữ đó một cách tốt nhất.

Dưới đây là tổng quan nhanh về một thành phần React sử dụng Thành phần được tạo kiểu có thể trông như thế nào

// ./Button.js
import styled from 'styled-components';

const StyledButton= styled.button`
  background-color: blanchedalmond;
  font-size: 1.4rem;
  padding: 1rem 2rem;
  text-transform: uppercase;
  transition: background-color ease 300ms, border-color ease 300ms;

  &:hover {
    background-color: #000;
    color: #fff;
  }
`;

const Button = () => (
  <StyledButton>
    Click Me!
  </StyledButton>
);

export default Button;

Chúng tôi cũng cần giải quyết các nhược điểm tiềm ẩn của giải pháp CSS-in-JS — và chắc chắn không phải là một nỗ lực để châm ngòi cho nhiều kịch tính hơn. Với một phương pháp như thế này, chúng ta rất dễ rơi vào một cái bẫy dẫn chúng ta đến một tệp JavaScript cồng kềnh có khả năng có hàng trăm dòng CSS — và tất cả điều đó xảy ra trước khi nhà phát triển thậm chí sẽ thấy bất kỳ phương thức nào của thành phần hoặc HTML của nó . Tuy nhiên, chúng ta có thể xem đây là cơ hội để kiểm tra kỹ lưỡng cách thức và lý do chúng ta xây dựng các thành phần theo cách của chúng. Khi suy nghĩ sâu hơn một chút về điều này, chúng ta có thể sử dụng nó để tạo lợi thế cho mình và viết mã gọn gàng hơn, với nhiều thành phần có thể tái sử dụng hơn

Ngoài ra, phương pháp này hoàn toàn làm mờ ranh giới giữa logic nghiệp vụ và kiểu ứng dụng. Tuy nhiên, với một kiến trúc được suy nghĩ kỹ lưỡng và được ghi chép đầy đủ, các nhà phát triển khác trong dự án có thể dễ dàng tiếp cận ý tưởng này mà không cảm thấy choáng ngợp

TL;DR

Có một số cách để xử lý con quái vật là kiến trúc CSS trên bất kỳ dự án nào và làm như vậy trong khi sử dụng bất kỳ khung nào. Thực tế là chúng tôi, với tư cách là nhà phát triển, có rất nhiều sự lựa chọn vừa cực kỳ thú vị vừa vô cùng choáng ngợp. Tuy nhiên, chủ đề bao quát mà tôi nghĩ vẫn tiếp tục bị lạc trong các cuộc trò chuyện siêu ngắn trên mạng xã hội mà cuối cùng chúng ta có, đó là mỗi giải pháp đều có giá trị riêng và sự kém hiệu quả của riêng nó. Đó là tất cả về cách chúng tôi triển khai cẩn thận và chu đáo một hệ thống tạo nên chính chúng ta trong tương lai và/hoặc các nhà phát triển khác, những người có thể chạm vào mã, cảm ơn chúng tôi đã dành thời gian để thiết lập cấu trúc đó

Làm cách nào để thêm kiểu CSS bằng JavaScript?

Truy vấn phần tử từ DOM và thay đổi kiểu nội tuyến của nó. .

tài liệu. getElementById('mục tiêu'). .

var style = tài liệu. createElement('phong cách'); . .

// Tạo biểu định kiểu được chia sẻ của chúng tôi. const sheet = new CSSStyleSheet();

Bạn có thể tạo kiểu JavaScript bằng CSS không?

Mọi phần tử HTML trong Javascript DOM chứa một thuộc tính đối tượng Javascript được gọi là style. Đối tượng kiểu chứa nhiều thuộc tính tương ứng với thuộc tính CSS, vì vậy bạn có thể đặt thuộc tính trên đối tượng kiểu để thay đổi trực tiếp kiểu CSS của phần tử .

programming javascript