Sử dụng css hay javascript tốt hơn?

Đừng hiểu sai ý tôi, CSS-in-JS là một giải pháp tuyệt vời, nhưng đó là vấn đề mà hầu hết mọi người không gặp phải. Duy trì các thành phần của bạn theo cách tiếp cận rất im lặng hoàn toàn giúp ích cho những thứ như

• Tác dụng phụ không chủ ý của phong cách xếp tầng
• Giúp các nhóm tổ chức các quy tắc của họ
• Tránh dẫm lên chân nhau khi phát triển

Nhưng những điều đó thực sự chỉ trở thành vấn đề với các nhóm lớn với nhiều nhà phát triển và một thư viện thành phần khổng lồ

Vậy bạn muốn tôi sử dụng cái gì?

Để bắt đầu từ quan điểm cao hơn một chút, bạn có thể làm quen với một vài ý tưởng cơ bản

• Đặt và làm theo một số quy tắc cơ bản để viết
• Sử dụng công cụ hoặc thiết lập tiêu chuẩn cho tổ chức
• Phát triển với các phương pháp như BEM

Điều này sẽ loại bỏ bất kỳ mối lo ngại nào đối với một dự án nhỏ hơn (hoặc lớn) và thực sự có thể làm cho cuộc sống dễ dàng hơn

CSS-in-JS giỏi ở điểm nào…

Giúp các nhóm lớn giữ gìn sự tỉnh táo

Một phần lý do tại sao giải pháp này tồn tại là do các nhóm rất lớn gặp khó khăn trong việc tránh xung đột khi họ có một thư viện khổng lồ để giải quyết. Việc có thể đặt thành phần của bạn và bất kỳ thứ gì tác động đến thành phần đó trong một khu vực được ngăn cách giúp mọi người tránh giẫm lên chân nhau và có khả năng tung ra các chỉnh sửa vô tình tràn khắp ứng dụng. Điều này thật tuyệt nhưng nhiều khả năng bạn là một trong số ít (hoặc một mình) đang làm việc trên một ứng dụng nhỏ. Nếu bạn và nhóm của bạn không trao đổi với nhau về một số quy tắc và tiêu chuẩn cơ bản, tôi cho rằng bạn đang gặp vấn đề lớn hơn

Loại bỏ nhu cầu học CSS (loại)

Một số nhà phát triển chế nhạo CSS nói rằng đó không phải là mã thực, những người khác sợ hãi về điều kỳ diệu của nó (đừng như vậy, hãy nắm lấy nó). Chỉ cần lo lắng về một vài quy tắc trong một thành phần sẽ giúp mọi người thoải mái khi biết rằng chỉ cần thêm một chút JS sẽ thay đổi giao diện của nó một chút

Cả hai có thể làm gì?

Tải lại mô-đun nóng (HMR)

Mặc dù một số người nói rằng lợi thế của CSS-in-JS là HMR, nhưng bạn sẽ thấy điều này hoạt động tốt với các biểu định kiểu. Đôi khi nó thực sự hoạt động tốt hơn một chút nếu bạn đang làm việc trên một thành phần yêu cầu kết xuất lại, chẳng hạn như những thành phần có yêu cầu mạng dưới dạng phụ thuộc, trong đó các thay đổi CSS sẽ không buộc kết xuất lại đó

Biến, Cài đặt chung

Nếu ai đó đang lập luận rằng CSS không thể làm điều đó, đó là vì họ đã không chú ý trong một thời gian. Sass không chỉ cung cấp điều này, nó còn có nguồn gốc từ các trình duyệt hiện đại

đóng gói

Có, bạn không cần JS để làm điều này. Thêm tên lớp vào phần tử cấp cao nhất của thành phần hoặc trang, lồng tất cả các kiểu vào bên trong và bạn có phần đóng gói của mình

.page-about {
  .header {
    background-color: red;
  }
}

.navigation {
  .button {
    background-color: blue;
  }
}

vải lót

https. // stylelint. io/

Hơn rất nhiều

Thành thật mà nói, có lẽ còn nhiều điều nữa mà cả hai đều làm giống nhau mà bạn không nhận ra

Bảng định kiểu và SASS nào làm tốt hơn…

Chia sẻ và cấu hình quy tắc

SASS cho phép bạn định cấu hình các biến, chức năng tùy chỉnh và mixin giúp đưa quá trình phát triển CSS của bạn lên một tầm cao mới

Bỏ qua tên bộ chọn xấu

// settings.scss

$color-ultraviolet: #5F4B8B;

// colbys-styles.scss

@import "settings";

.colbys-text-color {
  color: $color-ultraviolet
}

.colbys-background-color {
  background-color: $color-ultraviolet
}

Mặc dù cú pháp và cấu hình của điều này dễ dàng hơn nhiều so với việc thiết lập một loạt các cấu hình đối tượng trong JS, nhưng điều này cho phép bạn cung cấp trải nghiệm hình ảnh nhất quán và KHÔ mã của bạn

Thiết kế đáp ứng

Một trong nhiều điều bổ sung cho vai trò của một kỹ sư giao diện người dùng giỏi là chú ý đến cách dự án sẽ trông như thế nào trên nhiều thiết bị và kích cỡ. Nhìn chung, UX là công việc của mọi người. Phát triển với tư duy đáp ứng đầu tiên không chỉ làm cho quá trình đó dễ dàng hơn mà còn giúp xây dựng một sản phẩm tốt hơn

Cố gắng làm cho các thành phần của bạn phản hồi nhanh trong JS có nghĩa là nhiều Javascript hơn và nhiều trình xử lý sự kiện hơn. Điều này không chỉ làm tăng thêm độ phức tạp mà còn ảnh hưởng đến hiệu suất. Chúng tôi có thể làm điều này dễ dàng hơn nhiều với các truy vấn phương tiện được đưa ngay vào CSS

.colbys-sidebar {
  width: 100%;
}

// NO EVENT LISTENERS

@media (min-width: 1024px) {
  .colbys-sidebar {
    width: 25%;
  }
}

Thay vì phải điều chỉnh trình xử lý sự kiện, hãy đảm bảo trình xử lý sự kiện của bạn hủy đăng ký khi ngắt kết nối và chỉ xử lý việc tổ chức tất cả theo “cách phản ứng”, truy vấn phương tiện kích hoạt theo yêu cầu và sẽ chuyển đổi kiểu của bạn khi cần theo cách nhất quán hơn

Ít phức tạp hơn của các thành phần của bạn

Việc có thể tập trung vào chức năng và đầu ra được hiển thị cho phép bạn tránh lôi kéo các thư viện hoặc phương pháp phức tạp để vá CSS vào JS của bạn, chưa kể đến một hoặc hai hoặc ba bản hack JS mà bạn đang sử dụng để làm cho nó hoạt động trong

// This is an exaggeration

const styles = {
  color: blue;
}

if ( whos_favorite === 'Colby' || whos_favorite === 'Lord Commander' ) {
  styles.color = 'ultraviolet';
} else if ( whos_favorite === 'The Gary' ) {
  styles.color = 'red';
} else if ( whos_favorite === 'Mooncake' ) {
  styles.color = 'green';
} else if ( whos_favorite === 'HUE' ) {
  styles.color = 'blue';
} else if ( whos_favorite === 'KVN' ) {
  styles.color = 'yellow';
}

Hiệu suất

Ít Javascript hơn luôn là một chiến thắng. Trình duyệt của bạn ít phải tải hơn, trình duyệt của bạn ít phải biên dịch hơn, điều này cuối cùng sẽ chuyển thành tốc độ trang nhanh hơn. Khi trình duyệt tải một trang, nó sẽ cố gắng tối ưu hóa HTML và CSS nhiều nhất có thể. Có, bạn có thể đang tải nhiều CSS hơn trước, nhưng nhiều JS hơn sẽ rất tốn kém và cũng có nhiều khả năng buộc phải đăng ký lại đầy đủ;

Rất nhiều phép thuật nhỏ bạn làm với Javascript có thể được thực hiện bằng một số phương pháp hoạt hình CSS khá mạnh mẽ, chỉ cần duyệt qua Codepen một chút hoặc xem thứ gì đó như Animista

Tôi thực sự không có bất kỳ con số nào về điều này ngoài một số ghi chú hay và một số điểm chuẩn CSS-in-JS. Có ai đã thực hiện các công việc về điều này?

Vào cuối ngày, hãy làm những gì hiệu quả

Mọi người đều có sở thích cá nhân, mọi người đều làm việc hiệu quả theo một cách khác nhau. Làm những gì tốt nhất cho bạn, làm những gì tốt nhất cho nhóm của bạn và tránh coi những gì các nhà phát triển khác nói là quyền và sai giáo điều

Nếu bạn là nhà phát triển đơn độc trong một dự án và muốn thực hành CSS-in-JS để làm quen với nó khi bạn ở trong một nhóm lớn, hãy bắt đầu. Nếu bạn thuộc một nhóm lớn, rất lớn tại Facebook và muốn sử dụng biểu định kiểu, thì bạn có thể gặp sự cố nếu mọi người không tuân theo cùng một nguyên tắc, nhưng hãy làm những gì tốt nhất cho bạn và nhóm của bạn

Cách duy nhất bạn có thể tìm ra điều đó là trải nghiệm và thử nghiệm. Chơi với cả hai giải pháp và tìm ra lý do tại sao BẠN nghĩ rằng giải pháp này tốt hơn giải pháp kia. Bạn không bao giờ biết mình sẽ kết thúc ở đâu sau khi đạt được hợp đồng biểu diễn đó tại Google hoặc công ty khởi nghiệp mới của bạn trong nhà để xe của bạn

• ?
• ?️ Đăng ký Youtube của tôi
• ✉️ Đăng ký nhận bản tin của tôi

Được xuất bản lần đầu tại https. //www. colbyfayock. com/2019/07/bạn-không-cần-css-in-js-why-i-use-stylesheets

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Colby Fayock

Kỹ sư Front End và Nhà thiết kế UX đam mê giải quyết những thách thức có thể biến thế giới thành một nơi tốt đẹp hơn. https. //www. colbyfayock. com/bản tin/

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

CSS hay JavaScript tốt hơn là gì?

Tôi nên bắt đầu CSS hay JavaScript?

JavaScript có nhanh hơn CSS không?

CSS có thể thay thế JavaScript không?