Tệp CSS toàn cầu trong Angular là gì?

Khi tôi bắt đầu một dự án mới trong Angular, tôi biết rằng tôi muốn khắc phục phần lớn các vấn đề mà chúng tôi gặp phải khi viết các kiểu CSS tại Exponea. Vì vậy, tôi đã suy nghĩ và nghiên cứu rất nhiều về việc viết CSS hiện đại và mô-đun cùng với Angular và các tính năng khác. Trong bài viết này, tôi muốn giới thiệu cho bạn phong cách và kiến ​​trúc mà tôi đã sử dụng

Các vấn đề với CSS

Động lực của tôi là khắc phục các sự cố thường phát sinh khi bạn viết CSS trong một ứng dụng lớn như Exponea và bạn không thực sự nghĩ về kiến ​​trúc CSS. Phần lớn các vấn đề này như sau

• 💥 Có phong cách toàn cầu khó xác định chính xác trong cơ sở mã và chọn không tham gia trong một số thành phần
• 💦 Các kiểu rò rỉ vào các thành phần con từ thành phần cha
• 🔧 Phá vỡ phong cách dễ dàng bất cứ khi nào cấu trúc HTML thay đổi
• 📦 Có các tệp CSS lớn để định kiểu thành phần phù hợp. Tệp này sau đó là một cơn ác mộng để thay đổi và quan trọng hơn là để điều hướng
• ➕ Và nhiều thứ khác

Hầu hết các vấn đề này là do CSS mà chúng tôi có trong cơ sở mã Exponea đã được viết trong nhiều năm chỉ để hoàn thành công việc. Chúng tôi chưa bao giờ thực sự có nhiều thời gian để viết lại hoặc cấu trúc lại nó, vì vậy chúng tôi chỉ tiếp tục thêm ngày càng nhiều CSS

Phải xóa bao nhiêu lớp sửa CSS để nó mát trở lại

Những vấn đề này có thể được tóm tắt thành một vài điểm chính

• Phong cách rò rỉ vào và ra khỏi các thành phần
• phong cách toàn cầu
• CSS theo cấu trúc HTML

Khi tôi viết CSS cho dự án mới này, tôi đã cố gắng giải quyết những vấn đề này bằng cách sử dụng sức mạnh của LESS và Angular 🤘. Hãy để tôi giải thích từng giải pháp một

Ngăn chặn các phong cách bị rò rỉ

Đừng để các kiểu thoát khỏi đường ống… err, ý tôi là các thành phần

Angular cho phép bạn kích hoạt đóng gói kiểu bằng cách sử dụng Shadow DOM gốc hoặc nó có thể được mô phỏng bởi Angular. Dù bằng cách nào, điều này ngăn các kiểu vượt qua ranh giới giữa các thành phần. Nhờ đó, bạn không cần phải quá khắt khe trong việc đặt tên cho các lớp CSS của mình hoặc lo lắng về tính kế thừa trong CSS. Khi bạn kết hợp quy tắc này với quy tắc thứ hai, trong hầu hết các trường hợp, bạn có thể chắc chắn rằng CSS mà bạn viết cho một thành phần sẽ chỉ áp dụng cho mẫu của nó

Đây là cách sử dụng Shadow DOM với AngularKhông có kiểu toàn cầu nào ở đây

Các kiểu CSS toàn cầu gây hại nhiều hơn là tốt. Giai đoạn = Stage. Có một lời giải thích đơn giản cho ý tưởng đó. Khi bạn tạo kiểu cho một nút hoặc thẻ đầu vào, đó có vẻ là một ý kiến ​​hay. Rốt cuộc, bạn muốn giữ phong cách ứng dụng của mình nhất quán, phải không? . Và đôi khi bạn muốn thêm một đầu vào trông hoàn toàn khác, có thể chỉ trong một thành phần duy nhất. Vì vậy, bây giờ bạn phải ghi đè các kiểu CSS toàn cầu hùng vĩ của mình bằng các quy tắc cụ thể hơn hoặc, trời cấm, một câu lệnh !important

Đây là một giải pháp thay thế mà tôi đã sử dụng trong dự án. Hầu hết các kiểu nên dành cho một thành phần cụ thể. Nếu bạn sử dụng đóng gói Góc (và bạn nên làm như vậy), điều đó có nghĩa là các kiểu sẽ chỉ áp dụng cho thành phần duy nhất đó. Nhưng giả sử rằng bạn cũng muốn chia sẻ một số phong cách, chẳng hạn như đối với .btn-default tuyệt vời đó. Đây là giải pháp của tôi

1. Tạo một tệp mới cho lớp CSS đó
2. Bọc lớp đó trong một mixin mà sau này bạn có thể nhập
3. Đảm bảo rằng bạn giữ những phong cách ngọt ngào và ngắn gọn đó và cố gắng bám vào một lớp duy nhất trong mixin
4. Nhập lớp vào các thành phần mà bạn muốn sử dụng chúng trong

Đây là một ví dụ về một nút từ dự án

Một kiểu có thể nhập cho một nút

Như bạn có thể thấy, các kiểu cho .button được gói gọn trong mixin. Đây là một cú pháp LESS nhưng bạn có thể đạt được điều tương tự trong bất kỳ bộ tiền xử lý CSS nào khác. Bây giờ, đây là cách sử dụng các kiểu này trong một thành phần

Nhập các kiểu nút trong một thành phần

Mixin hiển thị lớp .button cho thành phần. Khi bạn sử dụng đóng gói Angular đã đề cập ở trên, các kiểu nút bạn vừa nhập chỉ được áp dụng cho thành phần này và chúng không bị rò rỉ ra bên ngoài. Điều này có một số lợi ích, bao gồm cả những

• Bạn chỉ nhập những gì bạn thực sự cần trong thành phần
• Đối với mỗi lớp được chia sẻ này, bạn biết chính xác nơi chúng được sử dụng

Một thành phần lớn hơn nhập nhiều kiểu được chia sẻ hơn, bạn chỉ nhận được CSS ideaFlat với các lớp

Vài tháng trước, tôi đã từng viết LESS như thế này

CSS phản ánh cấu trúc HTML

Như bạn có thể thấy, không chỉ các bộ chọn được lồng sâu vào nhau, chúng còn sử dụng tên thẻ thay vì lớp. CSS được viết theo cách này bám sát cấu trúc HTML của thành phần. Điều đó chỉ có nghĩa là một điều - thật tệ khi sửa đổi. Khi bạn thay đổi cấu trúc HTML của thành phần, bạn cũng phải sửa đổi CSS cho phù hợp. Cấu trúc được nhân đôi cả trong HTML và CSS

Thay vào đó, hãy xác định 2 quy tắc để viết CSS tốt hơn

1. Chỉ sử dụng các lớp làm bộ chọn
2. Giữ CSS phẳng

Đây là một CSS thành phần tốt hơn tuân theo các quy tắc này

Tôi đang sử dụng BEM trong đoạn mã này để đặt tên cho các lớp nhưng bạn có thể sử dụng bất cứ thứ gì bạn muốn. Điểm quan trọng là bạn chỉ sử dụng các lớp để chọn các phần tử. Hệ thống phân cấp cũng hoàn toàn bằng phẳng mà không cần lặp lại bộ chọn .table mọi lúc. Điều này là nhờ toán tử & trong LESS và các bộ tiền xử lý khác. Bạn sử dụng nó trong tên lớp như thế này. &__cell. Khi đoạn mã đó được biên dịch, nó sẽ tạo ra một lớp .table__cell mà không có bất kỳ bậc cha mẹ nào. Vì vậy, bây giờ khi bạn cần thay đổi HTML, CSS vẫn giữ nguyên

Đây là những bài học tôi nhận được từ việc cố gắng viết CSS theo mô-đun và có thể bảo trì cho một dự án mới. Nếu bạn đang thắc mắc, dự án mà tôi đã đề cập trong bài đăng này là giao diện người dùng góc cạnh mới cho Exponea Smallbiz

Cảm ơn bạn đã đọc bài viết này. Nếu bạn thích nó, hãy đảm bảo cho nó một 👏 và theo dõi tôi để nhận được nhiều quà tặng tuyệt vời hơn. Chúc một ngày tốt lành

Tệp CSS toàn cầu trong Angular là gì?

Tệp CSS toàn cầu là gì?

Làm cách nào để gọi CSS toàn cầu trong Angular?

Làm cách nào để sử dụng kiểu toàn cầu trong Angular?