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 rằng đa số các bạn đang đọc bài này đều thấy sự công bằng của bạn

< font style = "vertical-align: inherit;"> Bạn đang xem: chèn tệp css với javascript

Chào mừng bạn đến với một chủ đề gây tranh cãi trong đất phát triển mặt tiền! Tôi chắc chắn rằng phần lớn các bạn đang đọc bài viết này đều gặp phải những chia sẻ công bằng của bạn về #hotdrama xoay quanh cách xử lý CSS trong một ứng dụng JavaScript .

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 hoặc Vue hoặc Angular là ưu việt hơn. 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 ta đang tồn tại có rất nhiều người liên tục 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.

Bỏ qua những định kiến ​​về chủ đề này, hãy cùng khám phá thế giới hấp dẫn của kiến ​​trúc CSS!

Hãy để chúng tôi đếm các cách

Chỉ cần Googling “Cách thêm CSS vào [insert framework here]” sẽ mang lại nhiều 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 cùng 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.

Tùy chọn 1: Biểu định kiểu dang ol

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

  & lt; link rel = "stylesheet" href = "styles.css" & gt;  

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. Không có gì sai với điều đó cả, nhưng khi một ứng dụng trở nên lớn hơn và phức tạp hơn, thì việc duy trì một biểu định kiểu duy nhất ngày càng trở nên khó khăn hơn. Việc phân tích cú pháp 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 sẽ trở thành một vấn đề khó khăn đối với bất kỳ nhà phát triển nào làm việc trong dự án. Dòng thác cũng là một điều tuyệt vời, nhưng nó cũng trở nên khó quản lý theo nghĩa là một số phong cách bạn – hoặc các nhà phát triển khác trong dự án – viết sẽ đưa các 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 vấn đề này vấn đề

Chúng tôi có thể tiếp tục 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 kết hợp với nhau thông qua 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ý được điều này!

Bất kể trình biên dịch nào bạn quyết định sử dụng (hoặc không sử dụng) 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 liên kết & lt; & gt; < / code> 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 là điều xấu, nhưng đối với tất cả các ý định và mục đích, chúng tôi sẽ khái quát một chút ở đây và tránh hiển thị các tập lệnh và kiểu chặn hiển thị ở bất kỳ nơi nào có thể.)

Điều đó không có nghĩa là phương pháp này không có giá trị. Đối với một ứng dụng nhỏ hoặc một ứ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, một biểu định kiểu đơn lẻ có thể là một lệnh gọi tốt. Nó cung cấp sự tách biệt rõ ràng giữa logic nghiệp vụ và phong cách ứng dụng và 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ì đầu ra. Ngoài ra, một tệp CSS đơn lẻ khá dễ dàng để trình duyệt lưu vào bộ nhớ cache, do đó người dùng cũ không phải tải xuống lại toàn bộ tệp vào lần truy cập tiếp theo của họ.

Nhưng giả sử 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 các mô-đun CSS.

Tùy chọn 2: Mô-đun CSS

Một vấn đề khá lớn trong một biểu định kiểu là nguy cơ hồi quy. Viết CSS sử dụng một bộ chọn không cụ thể có thể làm thay đổi một 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 phương pháp tiếp cận có tên là “phong cách theo 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 theo chương trình cụ thể cho một thành phần. Do đó, phạm vi các kiểu đó đến 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 phạm vi của chúng tôi sẽ tạo ra một hậu tố băm mới như sau: header__15qy_ < / code>.

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

Sau khi tất cả đã nói và hoàn tất, chúng tôi vẫn đang tạo một tệp CSS duy nhất được gửi đến trình duyệt qua thẻ & lt; link & gt; 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 hiển thị, kích thước tệp bị phình ra, 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 của nó là các kiểu phạm vi, đi kèm với một lưu ý khác: loại bỏ phạm vi toàn cục - ít nhất là ban đầu.

Hãy tưởng tượng bạn muốn sử dụng một lớp chung .screen-reader-text 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ả : global xác định rõ ràng CSS bên trong nó là thứ được các thành phần khác trong ứng dụng cho phép truy cập toàn cầu. Miễn là bạn nhập biểu định kiểu bao gồm khối khai báo : global 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 mà là một điều gì đó cần phải làm quen.

Dưới đây là ví dụ về công cụ chọn giả : global đang hoạt động:

  // typography.css
:toàn cầu {
  .aligncenter {
    text-align: center;
  }
  .sắp xếp đúng {
    text-align: phải;
  }
  .alignleft {
    text-align: left;
  }
}  

Bạn có thể gặp rủi ro khi bỏ một loạt các 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 : global duy nhất. May mắn thay, nhờ sự kỳ diệu của những thứ như PostCSS lồng nhau hoặc Sass, bạn có thể nhập các phần trực tiếp vào bộ chọn để làm cho mọi thứ trở nên gọn gàng hơn một chút:

  // main.scss
:toàn cầu {
  @import "kiểu chữ";
  @import "biểu mẫu";
}  

Bằng cách này, bạn có thể viết các phần tử của mình mà không cần công cụ chọn : global 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 chút khác cần làm quen là cách 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ẻ cho Vue , React Angular nói cho chính họ ở đó. Tôi cũng sẽ để lại cho bạn một ví dụ nhỏ về những gì mà các tham chiếu lớp đó trông giống như được sử dụng trong một thành phần React:

  // ./css/Button.css

.btn {
  background-color: blanchedalmond;
  kích thước phông chữ: 1.4rem;
  đệm: 1rem 2rem;
  text-biến đổi: chữ hoa;
  chuyển đổi: độ dễ màu nền 300ms, độ dễ màu viền 300ms;

  & amp;: di chuột vào {
    màu nền: # 000;
    màu: #fff;
  }
}

// ./Button.js

nhập kiểu từ "./css/Button.css";

Nút const = () = & gt; (
  & lt; button className = {styles.btn} & gt;
    Nhấp vào đây!
  & lt; / nút & gt;
);

nút xuất mặc định;  

Một lần nữa, phương pháp 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 đang tìm cách tận dụng 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ì Mô-đun CSS có thể phù hợp với bạn!

Ở đây cũng cần lưu ý rằng Mô-đun CSS có thể được kết hợp với hương vị yêu thích của xử lý trước CSS. Sass, Less, 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ể được lợi khi được đưa vào JavaScript của bạn. Có lẽ việc đạt được quyền 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 để giúp việc viết CSS-in-JS trở nên dễ dàng nhất có thể. Các khung như JSS , Emotion 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 rõ ràng cho hầu hết các khuôn khổ 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 bạn và quá 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 khuôn khổ CSS-in-JS sẽ chỉ xuất ra CSS được liên kết của các thành phần được hiển thị trên trang vào 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ẻ & lt; style & gt; trong & lt; head & gt; 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 ngay từ đầu! Ngoài ra, giống như Mô-đun CSS, các kiểu được xác định 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 kết sẽ bị xóa kiểu của chúng khỏi & lt; head & gt; và các thành phần sắp được gắn kết của bạn sẽ có kiểu được gắn vào vị trí của chúng. Điều này tạo cơ hội cho các lợi ích về hiệu suất trên ứng dụng của bạn. Nó xóa một yêu cầu HTTP, không chặn hiển thị và đả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 vào 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à chức năng 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 một lớp chuyển đổi dựa trên một số thay đổi trạng thái hoặc phức tạp như một cái gì đó giống như chúng.

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 thực hiện điều này. Bây giờ, tôi chia sẻ cảm nhận của nhiều người khác, những người coi trọng 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 cách tiếp cận này là khá tiêu cực. Tôi không thích ý tưởng lây nhiễm chéo hai thứ. Nhưng tôi muốn giữ một tâm trí cởi mở. Hãy cùng 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 front-end sẽ cần để xem xét cách tiếp cận này.

  • Nếu chúng ta đang viết CSS-in-JS, chúng ta phải viết CSS thực . Một số gói cung cấp các cách viết CSS theo mẫu, nhưng yêu cầu bạn viết hoa chữ thường cho các thuộc tính của bạn - tức là padding-left trở thành paddingLeft . Đó không phải là điều 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 nội tuyến các kiểu 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, đây không phải là điều tôi sẵn sàng hy sinh.
  • Việc sử dụng CSS-in-JS phải cung cấp cho tôi những công cụ mạnh mẽ mà nếu không thì rất khó thực hiện với Mô-đun CSS hoặc biểu định kiểu dang ol.
  • Chúng tôi phải có khả năng tận dụng CSS hướng tới tương lai như lồng ghép 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.

Yêu cầu rất nhiều về 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 mình để nghiên cứu và triển khai các giải pháp xung quanh một ngôn ngữ mà chúng ta yêu thích, chúng ta phải đảm bảo rằng chúng ta có thể tiếp tục viết như vậy ngôn ngữ tốt nhất có thể.

Dưới đây là một cái nhìn nhanh về 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
nhập được tạo kiểu từ 'thành phần được tạo kiểu';

const StyledButton = styled.button`
  background-color: blanchedalmond;
  kích thước phông chữ: 1.4rem;
  đệm: 1rem 2rem;
  text-biến đổi: chữ hoa;
  chuyển đổi: độ dễ màu nền 300ms, độ dễ màu viền 300ms;

  & amp;: di chuột vào {
    màu nền: # 000;
    màu: #fff;
  }
`;

Nút const = () = & gt; (
  & lt; StyledButton & gt;
    Nhấp vào đây!
  & lt; / StyledButton & gt;
);

nút xuất mặc định;  

Chúng tôi cũng cần giải quyết những 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 để gây thêm kịch tính. Với một phương pháp như thế này, chúng ta cực kỳ 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 với hàng trăm dòng CSS - và tất cả đều đến trước khi nhà phát triển thậm chí sẽ nhìn thấy bất kỳ phương thức nào của thành phần hoặc HTML của nó. kết cấu. Tuy nhiên, chúng ta có thể coi đây là cơ hội để kiểm tra kỹ lưỡng cách thức và lý do tại sao 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ó để làm lợi thế của 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 ghi chép đầy đủ và có tư duy tốt, các nhà phát triển khác trong dự án có thể dễ dàng thực hiện ý tưởng này mà không cảm thấy bị choáng ngợp.

Có một số cách để xử lý con thú 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 công tác nào. Thực tế là chúng tôi, với tư cách là các nhà phát triển, có rất nhiều lựa chọn vừa là điều 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à chúng ta cuối cùng gặp phải, đó là mỗi giải pháp đều có ưu điểm riêng và tính kém hiệu quả của riêng nó. Tất cả là về cách chúng tôi triển khai một cách cẩn thận và chu đáo một hệ thống tạo nên tương lai của chúng tôi và / hoặc các nhà phát triển khác 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 đó.


Xem thêm những thông tin liên quan đến chủ đề chèn tệp css bằng javascript

This video shows How to Create a Css File and How to Include the css file on jsp and How to create a

  • Tác giả: Adwait Chitaley
  • Ngày đăng: 2015-02-16
  • Đánh giá: 4 ⭐ ( 8019 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Include dữ liệu từ file HTML bằng javascript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 3171 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Xin chào các bạn, hôm nay mình sẽ giới thiệu tới các bạn một bài toán khác mình đã gặp trong dự án. Đó là xử lý include dữ liệu từ file HTML vào nội dung trang web bằng javascript. Hãy cùng...

Chèn CSS vào Trang HTML

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 5375 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có ba cách khác nhau để chèn mã CSS vào trang HTML.

    ## Tham Chiếu Tới Tập Tin CSS ##
    Mã CSS có thể được thêm vào trang HTML bằng cách tham chiếu tới tập tin CSS bên ngoài sử dụng thẻ ``:

    ```ht...

Thay đổi CSS bằng JavaScript

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 3 ⭐ ( 9307 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách thay đổi CSS bằng JavaScript. Trong JavaScript thì CSS sẽ được thiết lập thông qua thuộc tính Element style và bạn sẽ học cách dùng JavaScript để thay đổi CSS thông qua thay đổi Element

Lập trình web với Visual Studio Code: HTML, CSS, JavaScript

  • Tác giả: www.hieuda.com
  • Đánh giá: 3 ⭐ ( 6120 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn lập trình web html, css, javascript bằng visual studio code. Cài đặt để lập trình web nhanh nhất bằng live server, emmet trên vscode.

Tạo kiểu CSS bằng JS DOM

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 2612 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng tự học lập trình JS này, bạn sẽ tìm hiểu cách tạo kiểu CSS cho các phần tử thông qua JS DOM. Tự học lập trình JavaScript

Thay đổi giá trị CSS Variable bằng JavaScript

  • Tác giả: 12bit.vn
  • Đánh giá: 5 ⭐ ( 8121 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thay đổi giá trị CSS Variable bằng JavaScript

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

XEM THÊM  Cách cài đặt WordPress bằng proxy ngược; quan điểm SEO - plugin proxy ngược wordpress

By DEVTEAM