Khi sự nghiệp của tôi có một sự thay đổi lớn từ việc chỉ có một mình tôi sang một nhóm hơn 20 người, tôi đã nhận thức rõ hơn về tầm quan trọng của các phương pháp hay nhất và khả năng mở rộng liên quan đến thiết kế và phát triển web. Bài đăng này là một phiên khám phá nhanh về CSS chức năng và lý do nó thay đổi cách tôi viết mã Show CSS cốt lõi của nó là một ngôn ngữ vẽ trang web. Chúng ta có thể làm một số điều tuyệt vời với CSS mà nhiều năm trước chưa từng làm được. Mọi thứ từ kiểu nội tuyến đến trừu tượng hóa tất cả các kiểu của chúng tôi thành biểu định kiểu bên ngoài dường như là những cải tiến lớn không phải 10 năm trước Hôm nay, chúng tôi đang tạo hoạt ảnh bằng CSS, xác định các lưới trừu tượng và thậm chí tạo các hình minh họa chính thức. Chúng ta có thể tạo các biến và sử dụng các công nghệ tiền xử lý như Sass hoặc Less để viết mã kiểu hướng đối tượng Câu hỏi vẫn chưa được giải quyết hoàn toàn là CSS mở rộng quy mô như thế nào? ngữ nghĩaMột cách tiếp cận lâu dài (và vẫn còn rất phổ biến) với CSS là triết lý tách biệt các mối quan tâm. Đường dẫn này dẫn chúng tôi đến việc chỉ bao gồm đánh dấu và nội dung cần thiết trong Điều này nếu không sẽ trông như thế này Tên lớp Đây vẫn là cách tôi từng thích viết CSS. Mặc dù nó ít tái sử dụng hơn một chút nhưng tôi có thể nhanh chóng quét và hiểu những gì mà Trong video, tôi đã chia sẻ một ví dụ về thẻ sinh học của tác giả như hình bên dưới. Điều này lấy ý tưởng tách biệt các mối quan tâm và áp dụng nó vào một ví dụ thực tế Kiểm tra bút mã bên dưới để xem trước đầy đủ Xem Pen semantic-css của Andy Leverenz (@andyleverenz) trên CodePen Với Lựa chọn tái sử dụngGần đây tôi đã liên kết một bài báo của Nicolas Gallagher có tên Giới thiệu về ngữ nghĩa HTML và kiến trúc giao diện người dùng. Anh ấy đã đề cập đến những điểm liên quan đến ngữ nghĩa phù hợp và tại sao mọi thứ lại như vậy. Điểm nổi bật của tôi từ bài viết này là viết mã có thể mở rộng là điều tuyệt đối bắt buộc khi làm việc trên quy mô lớn. Viết CSS chức năngJon Gold của Airbnb đã khơi dậy mối quan tâm ngay lập tức của tôi đối với Việc có một cơ sở mã nguyên vẹn cũng tạo ra một trường hợp sử dụng thú vị cho chức năng Ok, vậy nó là gì và tại sao tôi phải quan tâm?Tôi sẽ sử dụng một khung yêu thích có tên là Tachyons để minh họa khái niệm này. Bút dưới đây tạo danh sách người dùng với các thao tác sau. Bên trong phần đánh dấu, bạn sẽ thấy rất nhiều tên lớp có thể khiến bạn bối rối lúc đầu. Nhìn vào khung Vấn đề ở đây là các lớp này có thể được sử dụng hầu như ở mọi nơi để xây dựng mọi thứ. Chỉ sử dụng những gì bạn cần và loại bỏ phần còn lại. Tachyons, ví dụ, có nhiều hương vị. Bạn có thể sử dụng tất cả chúng bằng cách đơn giản là liên kết với biểu định kiểu hoặc chỉ nhập các mô-đun nút mà bạn biết mình sẽ sử dụng Xem ví dụ về Pen tachyons của Andy Leverenz (@andyleverenz) trên CodePen Mặc dù tên lớp không mô tả ngay lập tức nhưng bạn học cách hiểu chúng làm gì và cách bạn có thể kết hợp chúng để xây dựng giao diện người dùng tuyệt vời Các vấn đề với cách tiếp cận này
Các đặc quyền của phương pháp này
Đáng đọc và tài nguyênCSS chức năng không phải là thứ bạn chỉ cần đi và bắt đầu viết mà không gặp nhiều khó khăn. Nếu bạn làm việc một mình hoặc trong một nhóm nhỏ thì Với tất cả những gì đã nói, tôi mời bạn thực hiện một số nghiên cứu của riêng mình để xem CSS chức năng có thể ảnh hưởng như thế nào đến quy trình thiết kế và phát triển của riêng bạn Chức năng chính của CSS là gì?CSS là ngôn ngữ dành cho mô tả cách trình bày trang Web, bao gồm màu sắc, bố cục và phông chữ . Nó cho phép một người thích ứng bản trình bày với các loại thiết bị khác nhau, chẳng hạn như màn hình lớn, màn hình nhỏ hoặc máy in. CSS độc lập với HTML và có thể được sử dụng với bất kỳ ngôn ngữ đánh dấu dựa trên XML nào.
CSS và HTML phối hợp với nhau như thế nào?HTML cung cấp các công cụ thô cần thiết để cấu trúc nội dung trên trang web. Mặt khác, CSS giúp tạo kiểu cho nội dung này để người dùng có thể nhìn thấy nội dung đó theo cách mà nó dự định được xem . Các ngôn ngữ này được giữ riêng biệt để đảm bảo các trang web được xây dựng chính xác trước khi chúng được định dạng lại. |
