Bài viết html

Một trong những cách Mid và Senior nổi bật so với cấp độ Junior trong phát triển web cơ bản là đặt tên cho các lớp phần tử đánh dấu sao cho chúng đơn giản, dễ nhớ và dễ sử dụng.

Làm thế nào để bạn cần thiết lập một lớp học?

Mỗi loại thành phần trong website của bạn thường được sử dụng nhiều lần, chẳng hạn như hình ảnh, video hay Heading text. Nếu bạn không đặt tên (ở đây là lớp) mà chỉ dùng nó như

Bài viết html
Ví dụ: Khối CTA (Hình. chủ đề thanh lịch. com)

Bạn cần làm gì để đặt đúng tên lớp?

Điều đầu tiên bạn cần hiểu là cấu trúc đánh dấu của chuẩn HTML5, rất phổ biến hiện nay. Ví dụ: bố cục bố cục mặc định nên chứa một số đối tượng

Tiếp theo, bạn phải hiểu các quy tắc của tổ chức (Code Standards), chẳng hạn như sử dụng BEM hoặc sử dụng lớp tổng hợp.

Cuối cùng, bạn cần phải có nhiều kinh nghiệm, càng nhiều càng tốt, với nhiều trang web và loại trang web khác nhau

Trong phần giới thiệu này, Good Code sẽ đưa ra những ví dụ cơ bản về cấu trúc

để bạn hình dung.

Các loại phần kết cấu phổ biến nhất

Khi nào bạn có thể sử dụng
?

Bạn có thể sử dụng thẻ này khi bạn có Văn bản Tiêu đề và nội dung được hiển thị bên trong bố cục của mình. Ví dụ mã dưới đây

Yếu tố nào sẽ xuất hiện trong
?

Nó sẽ được sắp xếp theo thứ tự quan trọng

tiêu đề văn bản

Heading sẽ xuất hiện theo thứ tự, có thể từ H1 hoặc H2 và đi xuống. Thông thường, Heading càng nhỏ thì số càng lớn. Chỉ có 1 Heading 2 ở dưới chỉ có 1 Heading 3 nên chất lượng SEO không bền vững

Chúng tôi sẽ không đặt hàng nữa

  • Tiêu đề (thường là H1 hoặc H2)
  • Tiêu đề (thường là H3)
  • Tiêu đề phụ (thường là H4)
  • tiêu đề phụ

Ngoài ra các bạn designer thường đặt tên theo 1 cách khác với thiết kế

  • Tiêu đề chính (H1)
  • Tiêu đề phụ (H2)
  • Tiêu đề chính (H3)
  • Tiêu đề phụ (H4)
  • Nhãn (H5-H6)

Đây là 1 ví dụ, khi bạn không thấy "Heading" ở cấp 2 (thấp hơn) của Title thì đó không phải là Heading nữa.

tiêu đề

Nhiều người biết về HTML5 và thẻ

, nhưng họ chỉ sử dụng nó để làm Header trên cùng một trang web và không sử dụng nó ở nơi khác. Trong
 hoàn toàn sối số
 hạnh yều của bọn họ là bên trong 1 Heading Text và 1 paảa đoạn văn

Bài báo

Tag

cũng là một gợi ý nếu bạn có nhiều bài viết và muốn chúng hiển thị dưới dạng hiển thị thông tin. Lưu ý các thẻ này nên chứa 1 Heading (thường là Title của bài viết) và 1 đoạn văn, tốt nhất là có hình ảnh và link bài viết đó ở 1 trang riêng (single).

Làm thế nào để bạn đặt tên của lớp trong phần?

Việc đặt tên class section có thể ảnh hưởng đến các thành phần bên dưới nên bạn cần tuân theo một số quy tắc để tránh đặt tên class dài và khó nhớ.

Các tắt tên lớp cho phần hoặc 1 mô-đun

  1. Nó ngắn gọn, không quá 3 từ và chỉ 1 từ hoặc 1 từ. Đừng viết tắt. Các trường hợp đặc biệt nên được xem xét cho phạm vi toàn cầu của mô-đun/phần, chẳng hạn như chỉ dành cho header,

    0 hoặc

    1.
    Ví dụ
    Chính xác.

    2,

    3,

    4
    Không phù hợp.

    5,

    6,

    7

  2. Tên lớp phải phản ánh chức năng của mô-đun/phần về mặt công nghệ (hơn là loại nội dung). Lý do là nó không được tổ chức theo cách có thể tái sử dụng, vì vậy việc truyền dữ liệu không quan trọng bằng tính nhất quán của bố cục và khả năng hiển thị kỹ thuật.
    Ví dụ
    Chính xác.

    8,

    9,
    0
    Không phù hợp.
    1,
    2,
    3

Trong hầu hết các trường hợp, các mô-đun và lớp sẽ có cùng tên để dễ dàng quản lý cả đánh dấu cấu trúc và kiểu dáng.

Bạn có thể xem mẫu demo miễn phí của chúng tôi trên Github để xem cách gọi các mô-đun của chúng tôi trên mỗi trang.

Bài viết html
Chúng ta hãy xem cách bố trí Grid

Kọt to expand, root to name in the name class for section

Những từ và cụm từ này có thể được sử dụng kết hợp

  1. Nhóm CTA (đính kèm 1 nút/link dạng CTA). anh hùng, giới thiệu, chú thích, bản tin
  2. Cột nhóm (cột chia). danh sách, lưới, thư viện, khảm, bộ sưu tập, ba phần, bốn phần, chi tiết, hàng
  3. nội dung nhóm. văn bản, menu, một hình ảnh
  4. Nhóm mục tiêu lừa đảo. thẻ, vật phẩm, khối
  5. Nhóm tính năng. thanh trượt, băng chuyền, tìm kiếm, liên kết xã hội, chia sẻ xã hội, lời chứng thực, tiện ích, đàn accordion, kích hoạt điều hướng

Các y putez tén for element in

Sau khi đặt tên lớp là

5, chúng ta sẽ không thêm lớp cho các phần tử bên trong nó. Dưới đây là một số thủ thuật giúp bạn vẽ các lớp đối tượng dễ dàng hơn

Tiêu đề mục

  1. tiêu đề
  2. Tiêu đề phụ
  3. Mô tả hoặc Giới thiệu (thường được đặt thành Mô tả)

Điều hướng phần

  1. Điều hướng hoặc Menu
  2. (Thêm) Mục menu

Danh sách phần

  1. Danh sách hoặc Lưới
  2. (Nhỏ hơn) Vật phẩm hoặc Thẻ

Bố cục phần (Nếu có bố cục 2 cột, một trong số đó là thanh bên)

  1. Khối hoặc Bố cục
  2. (Nhỏ hơn) Khối (trái + phải), Ngoài Chính

Phần chân trang (thường chứa nút CTA)

  1. CTA hoặc nút
  2. Văn bản dưới chân trang

Để tránh phần chứa quá nhiều cấp độ, bạn nên sử dụng mô-đun trong phần khác. Ví dụ, kết quả của công việc này sẽ giống như của bạn

Phần kết luận

Code tốt sẽ giúp bạn đỡ mất thời gian đặt tên class cho section và element. Đừng lo lắng, đừng lo lắng nếu bạn không quan tâm