Mô-đun css tên lớp động

CSS trong phạm vi thành phần cho phép bạn viết CSS di động, truyền thống với các tác dụng phụ tối thiểu. không còn lo lắng về xung đột tên bộ chọn hoặc ảnh hưởng đến kiểu dáng của các thành phần khác

Gatsby hoạt động vượt trội với Mô-đun CSS, một giải pháp phổ biến để viết CSS có phạm vi thành phần. Đây là một trang web ví dụ sử dụng Mô-đun CSS

Mô-đun CSS là gì?

Trích dẫn từ trang chủ Mô-đun CSS

Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định

Mô-đun CSS cho phép bạn viết kiểu trong tệp CSS nhưng sử dụng chúng dưới dạng đối tượng JavaScript để xử lý bổ sung và đảm bảo an toàn. Các Mô-đun CSS rất phổ biến vì chúng tự động tạo tên lớp và hoạt hình duy nhất, do đó bạn không phải lo lắng về xung đột tên bộ chọn

Ví dụ về mô-đun CSS

CSS trong mô-đun CSS không khác CSS bình thường, nhưng phần mở rộng của tệp khác để đánh dấu rằng tệp sẽ được xử lý

Trong ví dụ này, một mô-đun CSS được nhập và khai báo là một đối tượng JavaScript có tên là

.button {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

Kích hoạt biểu định kiểu người dùng với tên lớp ổn định

Việc thêm một mã CSS liên tục

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

Đây là một ví dụ trong đó tên lớp

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

Sau đó, người dùng trang web có thể viết các kiểu CSS của riêng họ phù hợp với các thành phần HTML có tên lớp là

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

Khi nào nên sử dụng Mô-đun CSS

Các mô-đun CSS rất được khuyến khích cho những người mới xây dựng với Gatsby (và React nói chung) vì chúng cho phép bạn viết các tệp CSS di động, thông thường trong khi đạt được các lợi ích về hiệu suất như chỉ gói mã tham chiếu

Mô-đun CSS là một phương tiện để đạt được các tên lớp CSS có phạm vi cục bộ. Đối với ứng dụng một trang đơn giản, chúng có thể không cần thiết. Nhưng nếu bạn đang làm việc trên một ứng dụng lớn có hơn 20 thành phần, thì công cụ này thực sự có thể giúp bạn dọn sạch CSS của mình

Tất nhiên, việc áp dụng một công cụ mới có thể mất thời gian. bạn có thể tự hỏi

Tôi sẽ nỗ lực hết sức để thiết lập các Mô-đun CSS chỉ để biết rằng chúng không hoạt động với tôi chứ?

Để ngăn chặn điều đó, tôi đã thiết lập 7 ví dụ cụ thể cho thấy cách thức hoạt động của Mô-đun CSS trong các tình huống phổ biến nhất. Đọc lướt qua bài viết này trong 10 phút và bạn sẽ biết liệu việc áp dụng các Mô-đun CSS sẽ giúp ích hay gây hại cho dự án của bạn

Mục lục

Nhảy xung quanh nếu một số ví dụ khiến bạn quan tâm hơn những ví dụ khác

Đây là ví dụ đơn giản nhất có thể. Có một tên lớp duy nhất trong tệp

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Dưới đây là tổng quan về tất cả các tệp trong ví dụ này

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

.button {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Lưu ý cách lớp

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Tất cả những gì bạn phải làm là viết

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Nhân tiện,

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

đường vòng

Trước khi chúng ta chuyển sang ví dụ 2, hãy làm rõ một điểm mà một số người cảm thấy khó hiểu. Các câu lệnh nhập mô-đun CSS nhập một đối tượng JavaScript

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Trong đoạn mã trên, biến

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Để làm cho điều này hoàn toàn rõ ràng, tôi đã thêm một nhận xét vào từng ví dụ cho biết biến

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Trong ví dụ này, mô-đun CSS có 3 tên lớp khác nhau.

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Lưu ý cách cả ba tên lớp đều có thể truy cập được đối với thành phần trong đối tượng

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Trong ví dụ này, có các bộ chọn chỉ áp dụng cho các phần tử chứa CẢ lớp

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Lưu ý cách quy tắc

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Quy tắc CSS

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Một lớp trong Mô-đun CSS của bạn vẫn là một lớp trong CSS & JS được tạo. Viết quy tắc kết hợp nhiều lớp không thay đổi điều đó

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Chúng tôi đang sử dụng gói tên lớp ở đây để kết hợp tên lớp. Trong tình huống này, nó chỉ cần thêm một khoảng trắng giữa hai tên lớp

Trong ví dụ này, có các quy tắc kiểu dáng chỉ áp dụng cho các phần tử có tên lớp cụ thể cũng được lồng trong một phần tử khác có tên lớp cụ thể

Một lần nữa, các tên lớp được trả về riêng. Trong thành phần của bạn, bạn phải đặt một tên lớp cho phần tử cha và một tên lớp cho phần tử con

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

Rõ ràng là bạn sẽ muốn chia sẻ một số kiểu giữa các thành phần

Với các Mô-đun CSS, việc chia sẻ rõ ràng bằng cách sử dụng thành phần. Lần này chúng tôi có hai tệp mới

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

Mô-đun CSS viết lại tên lớp, nhưng chúng không chạm vào tên thẻ

Các bộ chọn như

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Trong một bộ chọn như

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

import React from 'react';
import styles from './Widget1.css';

class Widget1 extends React.Component {
  render() {
    return (
      
        Click Me
      
    );
  }
}
export default Widget1;

Tôi có thể đề nghị. Không bao giờ sử dụng bộ chọn CHỈ là tên thẻ. Luôn chỉ định tên lớp. Nếu không, quy tắc CSS sẽ áp dụng chung cho toàn bộ ứng dụng của bạn

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

Vì tất cả các Mô-đun CSS làm là viết lại tên lớp của bạn nên các tính năng bạn đã quen sử dụng trong CSS vẫn hoạt động bình thường

Đây là một ví dụ sử dụng truy vấn phương tiện. Văn bản khác nhau được đánh dấu tùy thuộc vào chiều rộng cửa sổ của bạn

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

Lưu ý rằng chỉ có tên lớp được thay đổi. Các truy vấn phương tiện của bạn vẫn chính xác như cách bạn đã viết chúng

Sự kết luận

Bất kể các Mô-đun CSS có hữu ích cho bạn hay không - bây giờ bạn đã biết. Nếu bạn quyết định sử dụng Mô-đun CSS, sẽ không có gì ngạc nhiên

Các mô-đun CSS giải thích các mô-đun CSS với ví dụ thích hợp là gì?

Phạm vi của mô-đun CSS cho React là gì?

Mô-đun SCSS là gì?

soạn CSS là gì?