Quy ước về CSS/Mô hình bố cục mã số

Question

Đã có bất kỳ nỗ lực nào và tạo phương thức chính thức để tổ chức mã CSS không? Trước khi tôi đi và tạo nên chiến lược của riêng mình để giữ cho mọi thứ dễ đọc, tôi tự hỏi có gì khác ngoài kia. Google đã không được rất hữu ích, vì tôi không hoàn toàn chắc chắn những thuật ngữ để tìm kiếm.

Tôi nghĩ nhiều hơn dọc theo dòng thụt/khoảng cách, khi nào sử dụng dòng mới, quy ước đặt tên vv

Bất kỳ ý tưởng?

Answer 1

Natalie Down của ClearLeft nổi tiếng tạo ra một slide show thực sự tuyệt vời bao gồm chủ đề này và nhiều hơn nữa http://natbat.net/2008/Sep/28/css-systems/

Tải PDF vì nó bao gồm nhiều thông tin hơn so với trình chiếu. Tôi muốn giới thiệu điều này cho các nhà phát triển CSS của tất cả các cấp độ kỹ năng.

Answer 2

Tôi không biết về bất kỳ quy ước nào, nhưng tôi biết có rất nhiều khuyến nghị thực sự tốt, nhưng về cơ bản phụ thuộc vào cách bạn muốn triển khai CSS cho bạn chọn cái phù hợp nhất với bạn.

Answer 3

Điều này rất chủ quan theo các cuộc tranh luận về định dạng mã thông thường và tôi không biết về bất kỳ quy ước được chính thức hóa nào.

Phương pháp tôi đã chọn là sử dụng tất cả các lớp và id chữ thường với dấu gạch dưới tách các từ (ví dụ: #page_container). Tôi khai báo tất cả các kiểu của mình trước tiên trước (html, body, ul, v.v.), sau đó tất cả các lớp và id, được sắp xếp theo thứ tự bảng chữ cái. Ngoài ra, tất cả các kiểu được xác định trong mỗi lớp, id hoặc thẻ cũng được xác định theo thứ tự abc. Sử dụng quy ước này giúp bạn dễ dàng theo dõi một phong cách cụ thể.

Để định dạng, tôi luôn nén nó càng nhỏ càng tốt, nhưng vẫn dễ đọc. Tôi đặt tất cả mọi thứ trên một dòng với không gian màu trắng thích hợp. Nếu bạn có Visual Studio, bạn có thể chỉ định định dạng này và định dạng tự động theo cách này cho bạn (Đặt Kiểu thành Quy tắc nhỏ gọn dưới Công cụ, Tùy chọn, Trình chỉnh sửa văn bản, CSS, Định dạng).

Quy ước đặt tên cực kỳ chủ quan ở đây, nhưng điều cần lưu ý là đặt tên cho các yếu tố của bạn như mục đích dự định, không phải ý nghĩa theo kiểu của chúng. Ví dụ: nếu bạn có khẩu hiệu công ty, bạn muốn tạo kiểu chữ lớn, màu đỏ, hãy nhập id #slogan thay vì #red_bold.

Dưới đây là một ví dụ đầy đủ để cung cấp cho bạn một ý tưởng:

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; } 
a { color: #2c5eb4; text-decoration: none; } 
a:hover { text-decoration: underline; } 
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; } 
h1 { font-size: 2.4em; line-height: 1.2em; margin-bottom: 0em; margin-top: 0em; } 
h2 { font-size: 1.7em; } 
h3 { font-size: 1.4em; } 
h4 { font-size: 1.2em; font-weight: bold; } 
h5 { font-size: 1.0em; font-weight: bold; } 
h6 { font-size: 0.8em; font-weight: bold; } 
img { border: 0; } 
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; } 
#content { clear: both; margin: 0; margin-top: -4em; } 
#columns { height: 36em; } 
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; } 
#column1 { width: 28%; } 
#column1 input { float: right; } 
#column1 label { color: #999; float: left; } 
#column2 a, #column3 a { font-weight: bold; } 
#column4 { border-right: 0; } 
#form { margin: 0 2em; } 
.help_button { float: right; text-align: right; width: 30px; } 

Answer 4

Dưới đây là một dự thảo về cách tôi đặt thuộc tính css của tôi. Nó gần theo hướng dẫn của việc định vị và bố trí đầu tiên, sau đó kiểu chữ, sau đó hình nền và những thứ nhỏ nhặt khác. Tôi cố gắng sắp xếp các thuộc tính của mình bằng cách chúng ảnh hưởng đến mô hình hộp nhiều nhất có thể. Tuy nhiên, thứ tự của tôi có xu hướng thay đổi một chút. Tôi đánh giá cao bất kỳ ý kiến ​​về điều này.

el { 
    display:; 
    float:; 
    clear:; 
    visibility:; 
    position:; 
    top:; 
    right:; 
    bottom:; 
    left:; 
    z-index:; 
    width:; 
    min-width:; 
    height:; 
    min-height:; 
    overflow:; 
    margin:; 
    padding:; 
    border:; 
    border-top:; 
    border-right:; 
    border-bottom:; 
    border-left:; 
    border-width:; 
    border-top-width:; 
    border-right-width:; 
    border-bottom-width:; 
    border-left-width:; 
    border-color:; 
    border-top-color:; 
    border-right-color:; 
    border-bottom-color:; 
    border-left-color:; 
    border-style:; 
    border-top-style:; 
    border-right-style:; 
    border-bottom-style:; 
    border-left-style:; 
    border-collapse:; 
    border-spacing:; 
    outline:; 
    list-style:; 
    font:; 
    font-family:; 
    font-size:; 
    line-height:; 
    font-weight:; 
    text-align:; 
    text-indent:; 
    text-transform:; 
    text-decoration:; 
    white-space:; 
    vertical-align:; 
    color:; 
    opacity:; 
    background:; 
    background-color:; 
    background-image:; 
    background-position:; 
    background-repeat:; 
    cursor:; 
    } 

Cá nhân tôi muốn giữ một thuộc tính trên mỗi dòng thụt lề một tab, với dấu ngoặc nhọn đóng dấu một tab. Đối với tôi, nó dễ đọc hơn theo cách này, nhưng đó chắc chắn là vấn đề về ý kiến ​​/ sở thích.

Tôi đã từng sử dụng các khai báo css thụt lề để khớp với các mối quan hệ cha mẹ/con html của tôi càng nhiều càng tốt, nhưng tôi không còn làm điều đó nữa.Tính năng nhóm củaCSSEdit giúp giảm đáng kể sự cám dỗ để làm như vậy.

CSS không thực sự có bất kỳ quy ước quy định nào cho cấu trúc mã. Vì vậy, nó đi xuống đến những gì làm việc tốt nhất cho bạn.

Answer 5

Tệp phải được mô đun hóa, vì vậy bạn có thể sử dụng @import s. Tôi thường có một tệp base.css cho các lớp cơ sở (chẳng hạn như kiểu chữ và màu sắc). Tùy thuộc vào cấu trúc trang web của bạn, nó có thể thuận lợi để cũng có CSS ​​"partials" khác để sử dụng lại trong suốt các bảng định kiểu người dùng. Các biểu định kiểu hậu duệ này có thể mở rộng kiểu cơ sở với độ chi tiết cao hơn nếu cần (Ví dụ: .warn {color:red;} có thể được mở rộng thêm p.warn {font-style:italic;} hoặc h1.warn {border:5px solid red;}), đây là mẫu thiết kế tuyệt vời để triển khai cái gọi là object-oriented CSS.

Trong chính các tệp, tôi muốn sắp xếp theo thứ tự bảng chữ cái và danh sách thuộc tính của mình. Tôi đã thử duy trì danh sách riêng biệt cho các loại bộ chọn khác nhau (danh sách id trước, sau đó danh sách các lớp và danh sách bộ chọn phần tử của tôi), nhưng tôi thấy điều này không cần thiết, vì vậy tôi có tất cả các bộ chọn trong cùng một chữ cái danh sách. Bằng cách đó tôi có thể nhanh chóng tìm thấy gốc của tất cả các bộ chọn phức tạp hoặc bất kỳ kiểu nào được cung cấp cho một bộ chọn đơn giản.

Trong bộ chọn phức tạp, tôi liệt kê từng bộ chọn theo thứ tự bảng chữ cái.

Nếu tôi không thể sử dụng Sass đối với một số lý do, tôi có thể bắt chước mô hình nesting của nó (tôi vẫn không chắc chắn nếu điều này đang làm việc ra hay không), như vậy:

@import url('/css/base.css'); 

a { 
    color:#369; 
    font-family: Helvetica, sans-serif; 
    font-weight: bold; 
    text-decoration: underscore; } 
    a img { 
    border: 0; } 

blockquote, .nav, p { 
    margin-bottom: 10px; } 
blockquote { 
    background: #eee; 
    padding: 10px; } 

h1, h2, h3, h4 { 
    font-family: Georgia, serif; } 
h1.warning { 
    border: 5px solid red; } 

.nav a { 
    font-size: 150%; 
    padding: 10px; } 
.nav li { 
    display: inline-block; } 

p.warning { 
    font-style: italic; } 
    p.warning a { 
    background: #fff; 
    border-bottom: 2px solid #000; 
    padding: 5px; } 
    p.warning .keyword { 
    text-decoration: underline; } 

Thật không may, bạn có thể tìm kiếm lợi nhuận cho p và không nhận ra rằng đó là một phần của blockquote, .nav, p. Điều này cũng không phải là rất "hướng đối tượng" thiết kế, nhưng nó được cho là tốt hơn so với đặt chuỗi các lớp học trên hầu như mọi yếu tố đòi hỏi phong cách. Vì vậy, cách tiếp cận này không hoàn hảo và không hoàn toàn miễn phí cho bạn đôi khi phải tìm trong tập tin, nhưng đó là cách tiếp cận tốt nhất mà tôi đã phát triển khi tôi không thể sử dụng các công cụ tạo CSS cho những lý do ngoài tầm kiểm soát của tôi. Tôi rất muốn nghe bất kỳ đề xuất nào về việc cải thiện phương thức này :)