Cấu trúc CSS dễ đọc

Một trong những khó khăn mà các lập trình viên gặp phải khi viết CSS là thực tế là thuộc tính bạn tìm kiếm có thể nằm trong bất kỳ dòng nào bên trong selector. Để giúp giải quyết vấn đề đó, tôi đã nghĩ về một cấu trúc để sắp xếp các style để

Một trong những khó khăn mà các lập trình viên gặp phải khi viết CSS là thực tế là thuộc tính bạn tìm kiếm có thể nằm trong bất kỳ dòng nào bên trong selector. Để giúp giải quyết vấn đề đó, tôi đã nghĩ về một cấu trúc để sắp xếp các style để bạn có thể biết nơi viết và tìm kiếm các thuộc tính bạn cần. Cấu trúc này bao gồm việc chia nhỏ các thuộc tính của một selector thành các khối để bạn biết nơi cần tìm các thuộc tính bằng cách đi thẳng đến khối tương ứng của chúng.

Cấu trúc

Bao gồm:

  • Khối định vị (Positioning Block)
  • Khối cấu trúc (Structure Block)
  • Khối kiểu chữ (Typography Block)
  • Khối bổ trợ (Modifier Block)

Khối định vị (Positioning Block)

Các thuộc tính thay đổi vị trí tuyệt đối của phần tử trên trang như vị trí, trên cùng, phải, dưới cùng, bên trái.

Khối cấu trúc (Structure Block)

Các thuộc tính sửa đổi cấu trúc, hình dạng, kích thước và chi tiết của phần tử như display, flex and grid properties, margin, padding, background, border...

Khối kiểu chữ (Typography Block)

Mọi thứ liên quan đến chữ nói chung, các thuộc tính của văn bản và phông chữ như font, text-align, color, text-decoration, text-transform...

Khối bổ trợ (Modifier Block)

Thuộc tính CSS thay đổi phần tử theo bất kỳ cách nào hoặc thêm một số chi tiết vào nó và không nằm trong các khối trên. Trong trường hợp này, tôi thường đặt các thuộc tính như transition, transform, box-shadow, cursor, animation...

Source: dev.to

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ