Đặt tên vùng chứa CSS

I’m just wondering what everyones division-naming convention is for division id and class names. We all have our own way of naming things but obviously something that is relevant and generic [i.e.

] rather than something that is targeted [i.e.

] is recommended.

How do you name your divisions? Do you use camel casing [i.e.

]? Do you use hyphens [i.e.
]? Or maybe you mix them both like Meitar Moscovitz suggests in his article How To Compose HTML ID and Class Names like a Rockstar?

Và bạn thực sự đặt tên cho chúng là gì?

  • thùng chứa/bao bọc
  • tiêu đề
  • điều hướng
  • thanh bên
  • Nội dung
  • cuối trang

Nhưng sau khi xem mã nguồn của rất nhiều trang web, rõ ràng là phần lớn trong số họ đặt tên cho bộ phận chân trang là “footer” và điều hướng trang web của họ là “nav”, “sitenav” hoặc “navigation”. Tôi sẽ gắn bó với “nav” vì phần tử nav trong đặc tả HTML 5. Nhưng còn vùng chứa Trang web chính của bạn thì sao?

  • thùng đựng hàng
  • vỏ bánh
  • tiêu đề
  • Tranh sơn dầu
  • Địa điểm
  • trang
  • Thứ gì khác…?

Tôi đang cố gắng tìm một quy ước mà tôi hài lòng và tôi tin rằng quy ước đó đúng về mặt ngữ nghĩa. Có ai có đề xuất hoặc đề xuất nào không?

I used to use camel casing such as

but I try and style away from it now, maybe I should return to camel casing. What do you think?

Andrew Cooper

bóng tối60

"tiêu đề" là một thứ khiến tôi khó chịu vô cùng vì chúng tôi có một thẻ hoàn toàn tốt gọi là 'tiêu đề' thường khá đủ cho nhiệm vụ

Cái đầu er khác với cái đầu ing . Tiêu đề là một phần, hơi giống như lời nói đầu của trang - nó thường chứa thương hiệu, logo, dòng giới thiệu trang và có thể có tiêu đề

“nav” hoặc “navigation” cũng mơ hồ một cách vô lý, đặc biệt nếu bạn sắp có một menu phía trên tiêu đề, menu chính bên dưới tiêu đề và danh sách các địa điểm cần đến trong thanh bên. “Điều hướng” cũng mơ hồ một cách ngớ ngẩn vì mọi liên kết trên một trang web đều là “điều hướng”

Điều quan trọng là những gì làm việc cho mọi người. “nav” và “subnav” là những cái tên hoàn toàn hay mô tả đầy đủ các menu điều hướng chính và phụ. Và các menu được gọi là "điều hướng", bởi vì đó là chức năng của chúng, cho phép mọi người điều hướng xung quanh trang web

mrcoda

Ngoài ra, một mẹo khác là cung cấp đường dẫn đầy đủ trong biểu định kiểu của bạn nếu bạn chưa sẵn sàng, div#page_container ul. shopping_list li#bread {} thay vì #bread , nếu không phải là đường dẫn đầy đủ thì ít nhất là đường dẫn dễ hiểu để dễ đọc và dễ hiểu hơn, bạn có thể .

Đó là một mẹo, chắc chắn. Vì vậy, "một cách tốt để cải thiện thể lực của bạn là nằm trên ghế sofa ăn khoai tây chiên", và nó cũng hữu ích

Không cần thêm chi tiết không cần thiết vào CSS của bạn. Nó làm tăng thêm sự cồng kềnh mà bạn không cần, nó làm tăng thêm độ phức tạp sẽ khiến bạn bối rối và làm xói mòn giá trị của biểu định kiểu xếp tầng.

Nếu bạn đặt toàn bộ “đường dẫn” như vậy, điều đó có nghĩa là bất cứ khi nào bạn di chuyển các mục xung quanh hoặc thay đổi cấu trúc, bạn sẽ phải viết lại toàn bộ CSS, trong khi nếu bạn chỉ cần bỏ đi . Và bạn cũng đang giới hạn cách sử dụng các kiểu trên toàn trang và trên các trang khác nhau. #bread, it would have carried on working wherever in the page it was. And you’re also limiting the way styles can be used throughout the page and on different pages.

Bằng cách bao gồm tất cả các chi tiết không liên quan đó, bạn đang làm cho biểu định kiểu của mình khó đọc và khó xác định chính xác từng khai báo làm gì vì có quá nhiều bit không cần thiết ở đó

Và làm cách nào bạn có thể sử dụng nhận xét để "tiết kiệm kích thước tệp"?

Rất nhiều cái tên mọi người sử dụng đối với tôi thực sự THỰC SỰ quá mơ hồ. Lấy 'vùng chứa' hoặc 'trình bao bọc' - MỌI DIV trên một trang thường là một số dạng vùng chứa hoặc trình bao bọc - câu hỏi trở thành "chứa hoặc bao bọc CÁI GÌ?"

Đây là lý do tại sao div gói ngoài cùng của tôi thường được gọi là #pageWrapper . ID vì chỉ có một và đó là bí danh đẹp cho “đầu trang” trong URL, pageWrapper vì nó bao bọc toàn bộ trang. Giống như trong cách lồng đôi cho bố cục nội dung đầu tiên, tôi sẽ có #contentWrapper xung quanh # nội dung and #columnWrapper around the columns. [though I’ll sometimes call that last one #fauxColumns ]

"tiêu đề" là một thứ khiến tôi khó chịu vô cùng vì chúng tôi có một thẻ hoàn toàn tốt gọi là 'tiêu đề' thường khá đủ cho nhiệm vụ. Trong 99% bố cục mà mọi người có div tiêu đề bổ sung xung quanh tên trang web [h1], thông tin bổ sung [div] và menu [UL], đó là một yếu tố hoàn toàn không cần thiết và lãng phí đánh dấu. Tại sao tôi không hài lòng với thẻ 'tiêu đề' này trong HTML 5. Chỉ làm tổ cồng kềnh hơn cho không có gì

“nav” hoặc “navigation” cũng mơ hồ một cách vô lý, đặc biệt nếu bạn sắp có một menu phía trên tiêu đề, menu chính bên dưới tiêu đề và danh sách các địa điểm cần đến trong thanh bên. “Điều hướng” cũng mơ hồ một cách ngớ ngẩn vì mọi liên kết trên một trang web đều là “điều hướng”

Đó là một trình đơn - nếu đó là trình đơn CHÍNH, tôi gọi nó là #mainMenu – Ai đã nghĩ đến nó? . Thùng chứa cấp khối hoàn toàn tốt mà bạn thường không cần lãng phí thời gian để vỗ một DIV khác xung quanh nó mà không làm gì… Mỗi khi tôi nhìn thấy thứ tào lao này.


Tôi có một sự thôi thúc mãnh liệt để tham gia vào một cuộc bắn súng

Mặc dù #sideBar , # nội dung#footer for me aren’t going anywhere. Those are consistent and meaningful enough - certainly better than the “leftColumn/rightColumn” bull or worse “column1” and “column2” on a two column layout… In that way I ‘kind of’ like HTML5’s “aside” tag, though that could imply a semantic meaning I don’t want on it. [you watch, people will start stuffing menu’s in “aside”]

Bất cứ khi nào loại chủ đề này xuất hiện, tôi liên kết đến một trang trên trang web dành cho nhà phát triển của IBM

ibm. com

Sáu cách để viết mã dễ hiểu hơn

Là một nhà phát triển, thời gian là tài nguyên quý giá nhất của bạn. Sáu mẹo về cách viết mã có thể bảo trì này được đảm bảo sẽ giúp bạn tiết kiệm thời gian và sự thất vọng. một phút dành để viết bình luận có thể giúp bạn tiết kiệm một giờ đau khổ

Mặc dù nó nằm trong thuật ngữ lập trình C, nhưng tôi khuyên bất kỳ ai đang viết mã ở ngoài đó hãy thực sự ĐỌC ĐIỀU ĐÓ. Đặc biệt là một chút về nhận xét với “và bây giờ chúng tôi đã hoàn thành. ”…

Xóa các tên hàm và biến có ý nghĩa [hoặc trong trường hợp HTML, đánh dấu ngữ nghĩa với các lớp hoặc ID có ý nghĩa] thường có thể làm cho nhận xét trở nên dư thừa .

Đồng thời, bản trình bày không có chỗ trong đánh dấu của bạn, vì vậy nếu bạn đang sử dụng các lớp như “trái”, “phải”, “xóa”, “redFont” hoặc “smallText” thì bạn đã bỏ lỡ một nửa ĐIỂM của việc sử dụng . Điều này tăng gấp ba lần đối với những người pha trò ngoài kia, những người làm những việc như class=“L T Cl B W512”

Thẻ vùng chứa CSS là gì?

Đã cập nhật. 02/07/2022 by Computer Hope. Khi mô tả HTML [Ngôn ngữ đánh dấu siêu văn bản], thẻ vùng chứa là thẻ HTML có cả thẻ mở và thẻ đóng . Ví dụ: hình ảnh hiển thị bảng phân tích thẻ HTML. Thẻ neo có thẻ mở và thẻ đóng xung quanh văn bản được hiển thị dưới dạng neo.

Bạn có thể đặt tên div trong CSS không?

Mục đích của tên lớp div là đơn giản nhất có thể. Không có tên được xác định trước mà bạn phải sử dụng cho tên lớp, vì vậy vâng, chúng có thể tùy ý miễn là chúng khớp với CSS .

Các quy ước đặt tên cho CSS là gì?

Tên được viết bằng chữ cái Latinh viết thường. Các từ cách nhau bởi dấu gạch ngang [ - ]. Tên khối xác định không gian tên cho các thành phần và công cụ sửa đổi của nó. Tên phần tử được phân tách khỏi tên khối bằng dấu gạch dưới kép [ __ ]. .
JavaScript
mẫu

Khi nào nên sử dụng CSS vùng chứa?

Chúng được sử dụng để đặt nội dung cùng với màu phông chữ, màu nền, cỡ chữ, họ phông chữ, v.v. . thùng chứa w3. Lớp này được sử dụng để thêm phần đệm 16px ở cả bên trái và bên phải của phần tử. Nó có thể được sử dụng với tất cả các phần tử vùng chứa HTML5 mà tôi. e. div, bài viết, phần, đầu trang, chân trang, v.v.

Chủ Đề