Cách tổ chức CSS trong nhiều tệp

Một cách khác để không chia CSS của bạn thành nhiều tệp là tìm hiểu cách tổ chức đúng CSS của bạn trong nhiều tệp

Khi được thực hiện đúng cách, điều này mang lại nhiều lợi ích

• Các tệp CSS của bạn sẽ nhỏ và dễ điều hướng. Không cần cuộn lên xuống và trình soạn thảo văn bản của bạn sẽ yêu bạn
• Các tệp CSS của bạn sẽ có nhiều mô-đun hơn
• Bộ chọn CSS của bạn sẽ không xếp tầng hoặc xung đột với các bộ chọn khác
• Phong cách của bạn sẽ dễ đoán hơn, mặc dù bạn không thể dự đoán tệp nào sẽ được đưa vào trước

Các thành phần

Trước tiên, bạn cần nghĩ về trang của mình bao gồm nhiều thành phần. Những điều mà bạn nên ghi nhớ

• Một thành phần nên khép kín. Điều này có nghĩa là bằng cách sử dụng thành phần, nó phải bao gồm tất cả đánh dấu, hành vi và kiểu dáng cần thiết trong một gói
• Một thành phần sẽ có thể tự quyết định xem nó sẽ trông như thế nào và hoạt động như thế nào, dựa trên đánh dấu
• Một thành phần nên được tổng hợp và tái sử dụng
• Phong cách và hành vi của một thành phần (lý tưởng) không bị ảnh hưởng bởi môi trường xung quanh

Có ba phần để giải quyết. Đánh dấu, hành vi và kiểu dáng

Đánh dấu và hành vi. Phản ứng

Một cách để đạt được điều này là sử dụng và suy nghĩ trong React

// MusicPlayerUI.jsclass MusicPlayerUI extends Component {
  render () {
    return (
      

        
Music Player

        
{this.props.currentSong}

                  songs={this.props.songs}
          currentSong={this.props.currentSong}
        />
      

    )
  }
}

Khi bạn viết, điều duy nhất có thể ảnh hưởng đến đánh dấu và hành vi chỉ là các thuộc tính được truyền cho nó.

Trích dẫn Heydon.
Các định nghĩa hàm Javascript có thể đi trước hoặc sau nơi chúng được gọi và các mô-đun HTML có thể được chèn vào bất cứ nơi nào bạn thấy phù hợp với luồng tài liệu.

Và nó cũng giống với kiểu dáng, bằng cách làm cho các kiểu từ các tệp khác nhau không can thiệp lẫn nhau

tạo kiểu. BEM

Một cách là áp dụng phương pháp BEM (Block, Element, Modifier)

BEM là một phương pháp để tạo “” độc lập và có thể tái sử dụng và soạn chúng trong một trang web. Đó chỉ là những gì chúng ta cần

Chúng tôi ánh xạ chúng tới thành phần React như thế này

• Thành phần phản ứng = Khối BEM
• Một phần tử React bởi một thành phần = Một phần tử BEM

Với ý nghĩ đó, chúng tôi tuân theo các quy tắc BEM để gán tên lớp cho các phần tử HTML, điều đó có nghĩa là tên lớp của mọi phần tử phải có tiền tố là tên của khối sở hữu

// MusicPlayerUI.jsclass MusicPlayerUI extends Component {
  render () {
    return (
      
className='MusicPlayerUI'>
         className='MusicPlayerUIのtitle'>Music Player
        
className='MusicPlayerUIのcurrentSong'>
          {this.props.currentSong}
        

        
className='MusicPlayerUIのplaylist'>
                      songs={this.props.songs}
            currentSong={this.props.currentSong}
          />
        

      

    )
  }
}

(Lưu ý rằng tôi phá vỡ các quy ước đặt tên một chút. Tôi sử dụng PascalCase cho tên khối để khớp với tên lớp React. Tôi sử dụng camelCase cho tên thành phần để nó là mã định danh JavaScript hợp lệ. Tôi sử dụng の làm dấu phân cách vì bản thân ký tự này biểu thị sự sở hữu và do đó có ý nghĩa hơn __. )

Bạn có thể thấy rằng bây giờ mọi thành phần trong thành phần của bạn đều có tên lớp bắt đầu bằng MusicPlayerUI và ngoài thành phần này, không ai khác sẽ sử dụng nó

Giờ không còn xung đột, không còn tầng CSS nữa. Điều đó có nghĩa là việc tôi đặt tệp CSS theo thứ tự nào không còn quan trọng nữa

Tôi đặt tệp CSS cùng với tệp JSX trong cùng một thư mục, điều này cho thấy tệp CSS và tệp JSX có mối quan hệ mật thiết

/* MusicPlayerUI.css */.MusicPlayerUI {
  font: 1.5rem var(--main-font);
}.MusicPlayerUIのtitle {
  color: #8b8685;
}.MusicPlayerUIのcurrentSong {
  color: #353433;
}.MusicPlayerUIのplaylist {
  max-width: 42rem;
  margin: 1rem auto 0;
}

Bây giờ tôi chỉ có thể nối các tệp CSS này mà không phải lo lắng tệp nào được chèn vào trước vì chúng không can thiệp lẫn nhau

Bạn biết CSS của mình có thể bảo trì được
khi bạn có thể bao gồm các tệp CSS của mình theo bất kỳ thứ tự nào
và điều đó không ảnh hưởng gì.

Bạn biết đấy, tôi chỉ làm điều này

@import "global.css";
@import "components/**/*.css";

Mặc dù tôi đặt toàn cầu. css (kiểu cơ sở) trước tiên, các quy tắc trong tệp đó phải có độ đặc hiệu rất thấp — đến mức ngay cả quy tắc cụ thể nhất trong toàn cầu. css sẽ không bao giờ cụ thể như quy tắc ít cụ thể nhất trong bất kỳ tệp CSS nào khác

tạo kiểu. Mô-đun CSS

Một kỹ thuật thú vị khác là sử dụng các mô-đun CSS. Nó mới và sáng bóng. Đã có một bài báo khác giải thích rồi nên tôi sẽ không đi sâu vào nó, nhưng nó cũng tuân theo nguyên tắc tương tự. Đóng gói ranh giới của biểu định kiểu của bạn

Sự kết thúc của CSS toàn cầu

Tất cả các bộ chọn CSS đều tồn tại trong cùng một phạm vi toàn cầu

Trung bình. com

kết luận

Mặc dù tôi chỉ đưa ra ví dụ đánh dấu cho React, nhưng bạn có thể làm điều đó với bất kỳ thư viện nào cung cấp tính trừu tượng của DOM

Nó có thể là Phản ứng. Nó có thể là chỉ thị góc. Nó có thể là các phần tử Polyme hoặc chỉ các phần tử Thành phần Web. Đó có thể là Jade mixins, Rails view helpers hoặc thậm chí là một chức năng đơn giản tạo ra đánh dấu

Mặc dù bạn viết HTML nhưng bạn không soạn chúng. Bạn trừu tượng hóa chúng trong một thành phần gói gọn tất cả các đánh dấu, hành vi và kiểu cần thiết

Bây giờ họ tự chủ. Bây giờ chúng có thể tái sử dụng. Bây giờ chúng có thể kết hợp được

Sau đó, bạn soạn các thành phần này

Khi tôi phát triển các ứng dụng web theo cách này, tôi không bao giờ nhìn lại

Tôi có thể tự tin thay đổi bất kỳ linh kiện nào mà không sợ hỏng linh kiện nào khác, vì chúng đều hoạt động độc lập

Có nhiều tệp CSS có ổn không?

Tôi nên có bao nhiêu tệp CSS?

Tôi có nên sử dụng một CSS cho nhiều trang không?

Các tệp CSS nên được tổ chức như thế nào?