Việc quản lý các kiểu của bạn trong toàn bộ ứng dụng với tư cách là nhà phát triển có thể đòi hỏi cao Nếu bạn viết các kiểu CSS của mình từ đầu. Với Mô-đun CSS, bạn có quyền kiểm soát chính xác hơn đối với các kiểu thành phần của mình. Ngoài ra, bạn có thể tạo các phiên bản kiểu khác nhau trong khi sử dụng phương pháp mô-đun để thiết kế ứng dụng của mình

Bài viết này xem xét các Mô-đun CSS, ưu điểm của chúng và cách chúng ta có thể tích hợp chúng vào Vue. ứng dụng js. Nó cũng bao gồm các ví dụ mã và mô tả của từng phần để làm rõ các khái niệm

Nếu bạn quan tâm, bạn có thể sao chép toàn bộ dự án từ GitHub

điều kiện tiên quyết

Để hiểu cách hoạt động của các Mô-đun CSS, bạn cần có hiểu biết cơ bản về thiết lập dự án Vue và kinh nghiệm làm việc với các kiểu CSS trước đây.  

Bài viết này sẽ bao gồm các chủ đề sau

1. Mô-đun CSS là gì?
2. Tại sao các Mô-đun CSS lại quan trọng?
3. Tích hợp các mô-đun CSS trong Vue. ứng dụng js
4. Mô-đun CSS so với. các thành phần theo kiểu
5. Phần kết luận

Mô-đun CSS là gì?

Theo mặc định, Mô-đun CSS là một tệp có phạm vi cục bộ tất cả các tên lớp và hoạt ảnh của bạn. Nó cho phép bạn xây dựng các kiểu trong tệp CSS và nhập chúng vào một đối tượng JavaScript với các thuộc tính từ các định nghĩa CSS. Tính năng soạn thảo có thể được sử dụng để mở rộng và mô đun hóa các khai báo kiểu

Tại sao các Mô-đun CSS lại quan trọng?

Các mô-đun CSS rất quan trọng vì chúng cung cấp một cách dễ chịu hơn cho các nhà phát triển để tạo các kiểu có thể bảo trì trong thời gian của các thành phần, quản lý các kiểu phần tử một cách chính xác và xây dựng các lớp kiểu riêng biệt bằng một mô-đun duy nhất.  

Trước khi bắt đầu, hãy xem một số ví dụ cơ bản phổ biến về cách các Mô-đun CSS hoạt động trong JavaScript trước khi triển khai nó trong Vue

Ghi chú. Để ví dụ sau hoạt động, bạn sẽ cần một gói webpack hoặc thư viện Parcel để nhập tệp CSS của bạn vào gói để nó có thể được sử dụng dưới dạng mô-đun. Để biết thêm thông tin, bạn có thể xem một ví dụ hoạt động tại đây

Tệp CSS chứa tất cả các kiểu cho thẻ của chúng tôi. Các mô-đun CSS cho phép bạn tạo các kiểu trong tệp CSS và nhập chúng vào một đối tượng JavaScript với các thuộc tính từ các định nghĩa

Thẻ. tập tin css

@import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap");

body {
  font-family: "Work Sans", sans-serif;
}

.card {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
  width: 30%;
  margin: auto;
}

.img {
  width: 100%;
}

.container {
  padding: 30px 16px;
  line-height: 2rem;
}
.heading {
  font-size: 2rem;
  font-weight: 1rem;
}

.link {
  background-color: black;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}

Bây giờ, chúng ta có thể nhập các kiểu vào tệp JavaScript của mình thông qua một mẫu chữ, trong trường hợp này

mục lục. tập tin js

import cardStyle from "./card.css";

document.getElementById("app").innerHTML = `



  

    
Our Products
 
    
 To provide the best-tasting produce, we take extra care to choose and develop certain crop kinds where the excellent flavor is the focus.
 
    Learn More
  


`;

Ảnh chụp màn hình sau đây là kết quả đầu ra

Như bạn có thể thấy, các kiểu từ các lớp của chúng tôi được áp dụng như mong muốn

Tích hợp Mô-đun CSS trong Vue. ứng dụng js

Ví dụ mã trên trình bày cách triển khai cơ bản Mô-đun CSS trong JavaScript bằng cách nhập các kiểu vào tệp của chúng tôi bằng cách sử dụng dấu ngoặc nhọn và ký hiệu $, e. g. , ${stylename}"

Chúng tôi cũng có thể đạt được điều này trong ứng dụng Vue, vì vậy hãy xem cách chúng tôi có thể tích hợp nó theo cách tương tự

Để sử dụng các Mô-đun CSS trong Vue, hãy thêm thuộc tính “mô-đun” vào khối kiểu và các lớp tham chiếu như trong ví dụ JavaScript bên dưới

Nó hoạt động như thế nào trong Vue?

Hãy xây dựng một hồ sơ người dùng đơn giản hiển thị ảnh, tên và vị trí của một ví dụ về mã người dùng.
Để làm điều này, bước đầu tiên là tạo một tệp UserProfile trong thư mục thành phần của chúng tôi. Tiếp theo, chúng ta thêm thuộc tính “module” vào phần tử

Tiếp theo, chúng ta sẽ thêm thuộc tính “module” bên trong thẻ style, trong UserProfile

Mã trước sẽ tạo đầu ra trong ảnh chụp màn hình bên dưới

Khi chúng tôi kiểm tra ứng dụng của mình, công cụ xây dựng sẽ chuyển đổi tên lớp của chúng tôi thành các biến. Ví dụ: tên lớp của thẻ đầu tiên là UserProfile_container_1X6ae khi chúng tôi kiểm tra nó

Mô-đun CSS so với. các thành phần theo kiểu

Các mô-đun CSS và các thành phần được tạo kiểu đều phù hợp với ứng dụng của bạn, nhưng một mô-đun phù hợp hơn mô-đun kia. Hầu hết các nhà phát triển thích triển khai các thành phần theo kiểu vì nó dễ dàng hơn và giúp các nhà phát triển sử dụng lại các kiểu giống nhau trong một ứng dụng khác. Trong Mô-đun CSS, bạn phải tạo CSS của mình trong một tệp và đưa nó vào JavaScript của bạn, trong khi đối với các thành phần được tạo kiểu, bạn chỉ cần viết các kiểu của mình bên trong các thành phần của mình và sử dụng chúng ở bất cứ nơi nào các thành phần được sử dụng

Bạn có thể tạo các kiểu có thể sử dụng lại bằng cả Mô-đun CSS và các thành phần được tạo kiểu. Nếu bạn quan tâm đến việc triển khai bất kỳ kiểu nào, bạn cần lưu ý một số điều khác nhau, bao gồm.  

• Hiệu suất
• Đường cong học tập
• Hội nhập

Phần kết luận

Khi ứng dụng của bạn phát triển, việc quản lý kiểu có thể trở nên phức tạp. Một vấn đề bạn sẽ gặp phải là va chạm không gian tên. Tuy nhiên, Mô-đun CSS giúp bạn tránh vấn đề này bằng cách gán tên biến mới cho tên lớp của bạn

Ngoài ra, bằng cách thiết kế ứng dụng của bạn sử dụng chiến lược mô-đun, việc duy trì quyền kiểm soát các kiểu của bạn và tạo nhiều lớp kiểu khác nhau sẽ dễ dàng hơn nhiều.  

Bài viết này đã thảo luận về các mô-đun CSS và cách sử dụng chúng. Hi vọng sẽ giúp ích cho các bạn tích hợp các Module CSS vào ứng dụng Vue của mình. Chúc may mắn

Nếu bạn thích những bài viết như thế này, hãy duyệt qua thư viện Mattermost và tiếp tục học tập.
Bài đăng trên blog này được tạo ra như một phần của Chương trình viết về cộng đồng quan trọng nhất và được xuất bản theo CC BY-NC-SA 4. 0 giấy phép. Để tìm hiểu thêm về Chương trình viết về cộng đồng quan trọng nhất, hãy xem phần này.

Đọc thêm về

Ezekiel Lawson

Ezekiel Lawson hiện là một nhà văn kỹ thuật và nhà phát triển phần mềm, ngoài việc xây dựng các công cụ và ứng dụng web, anh ấy thích giáo dục mọi người và đơn giản hóa các vấn đề phức tạp để họ dễ hiểu bằng cách chia sẻ các tài nguyên sẽ hướng dẫn các nhà phát triển