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

Ole Ersoy

Làm theo

6 tháng 10 năm 2019

·

1 phút đọc

:root{
    --hello-color: indigo;
}

@Input[] color: string = 'red';

styles: [`h1 {
    font-family: Montserrat;
    color: var[--hello-color];
}`]

constructor[public element: ElementRef] {}ngOnInit[] {
    this.element.
    nativeElement.querySelector['h1'].
    style.setProperty['--hello-color', this.color];​
}

Ban đầu được đăng trên blog của tôi. https. //Blog. merckx. fr/avoid-using-global-styles-in-your-angular-projects/

CSS là ngôn ngữ được sử dụng để định kiểu trang HTML. Nó có một bộ quy tắc đơn giản để tính giá trị của các thuộc tính của mọi phần tử DOM trên một trang. Góc cung cấp đóng gói chế độ xem để đảm bảo các kiểu của thành phần chỉ áp dụng cho thành phần đã cho. Tuy nhiên, phong cách của các phần tử DOM được tạo bởi các thành phần đó vẫn bị ảnh hưởng bởi phong cách toàn cầu. Điều này làm cho việc gỡ lỗi CSS trở nên khó khăn

Trong mọi dự án tôi đã làm, mã CSS tùy chỉnh luôn chiếm ít nhất 10% tổng số lượng mã [tính theo số dòng mã]. Và chúng ta luôn có xu hướng đánh giá thấp nỗ lực cần thiết để duy trì nó. Tôi chưa bao giờ thực sự đo thời gian làm việc với các tệp CSS nhưng tôi sẽ không ngạc nhiên nếu nó cũng chiếm khoảng 10% thời gian của tôi. CSS xứng đáng có một vị trí tốt hơn trong tất cả các dự án web của chúng tôi

Trong một bài viết hay, Ben Lorantfy đã so sánh các kiểu toàn cục trong CSS với các biến toàn cục trong JS. Tóm lại, cả hai đều chia sẻ các vấn đề sau

• phá vỡ đóng gói
• khả năng đọc kém
• phá vỡ thông tin che giấu
• ô nhiễm không gian tên

Thật không may, rất hiếm khi sử dụng thư viện giao diện người dùng không đi kèm với kiểu toàn cầu. Bootstrap, Material Design, Prime NG và NG Zorro đều đi kèm với phong cách toàn cầu. Tuy nhiên, điều đó không có nghĩa là bạn nên thêm lộn xộn vào mớ hỗn độn

Các kiểu toàn cầu và đặc biệt là các lớp rất tiện dụng vì chúng cho phép các nhà phát triển áp dụng các kiểu cho các thành phần bằng cách gắn nhãn [hy vọng rằng các nhãn đó có ý nghĩa về mặt ngữ nghĩa nhưng đó là một cuộc tranh luận khác]. Đó là điều chúng tôi muốn giữ trong một cách tiếp cận mới. Thuộc tính mà chúng tôi muốn loại bỏ là các kiểu toàn cầu được áp dụng trên toàn cầu. Thay vào đó, chúng tôi muốn các phong cách toàn cầu được áp dụng cục bộ

Trong bài đăng này, tôi sẽ trình bày một cách tiếp cận dựa trên SASS mixin. Tôi trích dẫn trang web của ngôn ngữ SASS

Mixins cho phép bạn xác định các kiểu có thể được sử dụng lại trong toàn bộ biểu định kiểu của bạn

cấu trúc tệp

Điều đầu tiên của phương pháp này là tổ chức mã SASS của bạn giống như cách bạn tổ chức mã JS/HTML của mình. Đừng bỏ bê nó. Tôi đặt tất cả các phong cách toàn cầu trong một thư mục có tên là styles. Tôi đề nghị đặt tất cả các mixin vào dưới styles/mixins. Mô đun hóa mixin trong các gói có ý nghĩa. vùng chứa, danh sách, bảng, đầu vào, nút, kiểu chữ, v.v. Tại thời điểm này, tôi sẽ đề xuất một cái gì đó giống như

styles/
|__ mixins/
    |__ typography.sass
    |__ containers.sass
    |__ quote.sass
    |__ tables/
        |__ compact-table.sass
        |__ data-table.sass

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Mixin trong hành động

Chúng ta hãy xem bản mixin quote. Mixin này có thể thêm một số kiểu giống như trích dẫn vào một phần tử. nền màu xám, một số phần đệm, một số kiểu phông chữ và màu sắc

trích dẫn. ngổ ngáo

@mixin quote
  font-style: italic
  background: rgb[240,240,240]
  border-left: 2px solid rgb[200,200,200]
  color: rgb[100,100,100]
  padding: 10px

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đây là cách chúng ta có thể sử dụng mixin của mình

ứng dụng. thành phần. html

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Molestiae tempore officiis animi sint, corporis officia, vel eaque in, quaerat exercitationem ut.

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

ứng dụng. thành phần. ngổ ngáo

@use 'mixins/quote'

.main-quote
  @include quote.quote
  font-size: 20px

.second-quote
  @include quote.quote

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tại thời điểm này, có một số điều cần lưu ý

Phong cách ở lại địa phương

Chúng tôi không có bất kỳ phong cách nào được áp dụng trên toàn cầu. Chúng tôi áp dụng các mixin toàn cầu [có sẵn cho bộ xử lý trước SASS] cho các kiểu cục bộ

Nó giữ cho mẫu sạch sẽ

Chúng tôi chỉ định một lớp cho mỗi

, các lớp sau đó được xác định trong tệp SASS của thành phần. Sau đó, chúng tôi có thể áp dụng một số mixin cho mỗi lớp

Mặc dù chỉ định một lớp cho mỗi

có vẻ là một quá trình tẻ nhạt, nhưng nó thực sự đảm bảo rằng mẫu của chúng ta luôn sạch sẽ. chúng tôi không quá tải các thuộc tính lớp. Định nghĩa kiểu được chỉ định trong tệp SASS

"Kiểm tra lớp" miễn phí

Bộ xử lý trước SASS sẽ khiếu nại nếu mixin không tồn tại, trong khi CSS sẽ không khiếu nại nếu bạn mắc lỗi đánh máy trong một lớp

Tôi sẽ thử cách tiếp cận này cùng với cách được mô tả trong Một cách tinh tế để kích hoạt các thành phần Góc có thể tùy chỉnh CSS trong dự án lớn tiếp theo mà tôi phải lãnh đạo. Tôi tò mò về kết quả. Các kết quả trung gian trên một dự án nhỏ đã đầy hứa hẹn

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

Đặt phong cách toàn cầu ở đâu?

Làm cách nào để thêm kiểu toàn cầu vào các thành phần Góc?

Làm cách nào để thêm lớp CSS trong Angular?