Có cách nào đúng và sai để định dạng CSS không?

Question

Khi tôi lần đầu tiên bắt đầu viết CSS, tôi đã viết nó trong một hình thức mở rộng

div.class { 
    margin:  10px 5px 3px; 
    border:  1px solid #333; 
    font-weight: bold; 
    } 
    .class .subclass { 
     text-align:right; 
     } 

nhưng bây giờ tôi thấy mình viết css như thế này: (Ví dụ từ mã Tôi thực sự viết bây giờ)

.object1 {} 
    .scrollButton{width:44px;height:135px;} 
     .scrollButton img {padding:51px 0 0 23px;} 
.object2 {width:165px;height:94px;margin:15px 0 0 23px;padding:15px 0 0 10px;background:#fff;} 
    .featuredObject .symbol{line-height:30px; padding-top:6px;} 
    .featuredObject .value {width:90px;} 
     .featuredObject .valueChange {padding:5px 0 0 0;} 
     .featuredObject img {position:absolute;margin:32px 0 0 107px;} 

và tôi bắt đầu lo lắng vì rất nhiều lần tôi thấy biểu mẫu đầu tiên được thực hiện trong các ví dụ trực tuyến, trong khi tôi thấy biểu mẫu thứ hai dễ dàng hơn nhiều để tôi làm việc cùng. Nó có chiều cao thẳng đứng thấp hơn, vì vậy tôi có thể nhìn thấy tất cả các lớp trong nháy mắt với ít cuộn hơn, việc lập bảng phân cấp có vẻ rõ ràng hơn và trông giống như mã tôi viết bằng javascript hoặc html. Đây có phải là một cách hợp lệ để làm mã, hoặc để giữ với các tiêu chuẩn khi đưa nó trực tuyến, tôi nên sử dụng hình thức theo chiều dọc để thay thế?

Answer 1

Cá nhân tôi thích kiểu đầu tiên. Tôi thích những thứ dễ đọc và tôi không ngại di chuyển. Bản chất dày đặc của phong cách thứ hai làm chậm khả năng đọc của tôi, khả năng chọn ra các mục mà tôi quan tâm.

Chắc chắn có những sự cân nhắc về thương mại được xem xét với CSS do kích thước tệp. CSS có thể được nén. Tôi thấy kích thước của các tập tin CSS là ít nhất của những lo lắng của tôi với các trang web tôi đã xây dựng cho đến nay.

Cuối cùng, điều quan trọng là bạn chọn kiểu dáng nào phù hợp. Sự nhất quán đó sẽ làm cho cuộc sống của bạn đơn giản hơn khi bạn phải cập nhật CSS của mình hoặc khi một nhà phát triển khác phải cập nhật CSS của bạn.

Answer 2

Well, here is what say the most :)

Tóm lại: css-tricks.com chạy một cuộc thăm dò. Bởi một khoảng gần 3 đến 1, hầu hết mọi người ưa thích nhiều dòng trên phong cách css dòng đơn.

Answer 3

Tôi không biết về bạn nhưng tôi thích chế độ thẳng đứng trong khi dev vì nó dễ đọc hơn rất nhiều cho tôi.

Tuy nhiên, trong sản phẩm, bạn muốn nén css để giảm tải trọng và do đó, kiểu thứ hai có ý nghĩa. Chủ yếu, bạn sẽ sử dụng một số máy nén CSS để làm điều này.

Answer 4

tôi thích viết css theo nhiều dòng. bởi vì điều này dễ viết và dễ đọc hơn. chúng tôi có thể tìm thấy lỗi càng sớm càng tốt và giao diện đẹp với thụt đầu dòng. chủ yếu là khi một nhà thiết kế làm việc với css và trao cho nhà phát triển để phát triển trang web hơn nhà phát triển có thể hiểu dễ dàng. vì vậy tôi nghĩ rằng nhiều dòng css là cách tốt hơn để làm việc.

Answer 5

Cho biết cấu trúc phân cấp bằng thụt đầu dòng không phải là một ý tưởng tồi. Tuy nhiên, bạn nên cẩn thận rằng bạn không đánh lừa mình. Trong ví dụ của bạn, bạn có thể giả sử rằng .scrollButton luôn nằm trong .object1. Nhưng CSS không tuân theo quy tắc đó. Nếu bạn đã sử dụng lớp .scrollButton bên ngoài .object1, nó sẽ vẫn nhận được kiểu.

Answer 6

Tôi thích kiểu thứ hai, nhưng lưu ý rằng đó là kiểu . Trong cùng một cách mà một số người thích

function (arg) 
{ 

    body(); 

} 

để

function(arg){ 
    body(); 
} 

Tôi không nhận được nó, bản thân mình. Đối số là "dễ đọc hơn" và phản hồi của tôi liên tục "... cho bạn".Như một lưu ý, tôi nhận được cảm giác rằng đây là lý do tại sao rất nhiều ví dụ sử dụng phiên bản thêm khoảng trắng; nó có danh tiếng (nếu không được xác nhận tài sản) dễ đọc hơn.

Chọn cái bạn thích và gắn bó với nó. Nếu bạn có một nhóm hợp tác với, hãy cố gắng đồng thuận, hoặc cấm, viết một số tập lệnh định dạng tự động và tránh xa cách của nhau. Nó không giống như thật khó để biến đổi một cách máy móc thành cái khác.

Answer 7

Kiểu bạn viết là lựa chọn của bạn (tôi thích nhiều dòng) nhưng như Rajat cho biết bạn muốn xóa bất kỳ khoảng trống thừa nào sau khi dev. Bất cứ lúc nào bạn có thể giảm kích thước tập tin và tải trọng bạn đang làm trang web của bạn và khách truy cập của bạn một ưu tiên.

Answer 8

Tôi nghĩ điều đó cũng tùy thuộc vào trình chỉnh sửa của bạn. Tôi sử dụng định dạng nhiều dòng và ngưng tụ mọi định nghĩa với gấp Vim (tôi thiết lập các dấu gấp là { và }) để tôi nhận được một thẻ/lớp/id trên mỗi dòng, có thể mở rộng khi cần.

Sử dụng nhận xét để xác định "phần" tôi nhận được giao diện rất rõ ràng với cuộn dọc tối thiểu trong khi vẫn duy trì khả năng đọc của nhiều dòng trên định nghĩa mở rộng.

Answer 9

Tôi chỉ muốn chỉ ra rằng Textmate có một tùy chọn cho phép bạn dễ dàng chuyển đổi giữa hai kiểu này bằng cách chọn một khu vực và nhấn Ctrl-Q/Ctrl-Alt-Q để mở rộng/thu gọn. Kết quả là tôi đã tìm thấy rằng tôi thích CSS của tôi bị sụp đổ trừ khi tôi viết hoặc gỡ lỗi sâu một phần cụ thể. Nhưng, với khả năng dễ dàng chuyển đổi giữa hai người, tôi thấy rằng cả hai cách đều hữu ích cho các hoàn cảnh khác nhau.

Answer 10

Tôi thích nhiều dòng hơn cho đến khi chúng tôi triển khai. Vào thời điểm đó tôi muốn nó được giảm thiểu.

Answer 11

Cá nhân tôi thấy cả hai ví dụ của bạn khó đọc, đặc biệt là ví dụ thứ hai.

Nhiều dòng dễ theo dõi hơn và thụt đầu dòng có thể gây hiểu lầm vì CSS không nhất thiết được áp dụng theo cách đó. Sự thụt đầu dòng của bạn có thể khiến bạn tin vào nó.

tôi thích thử và đúng phương pháp cơ bản của nhiều dòng, với lý/trật tự logic:

div.class 
{ 
    margin: 10px 5px 3px; 
    border: 1px solid #333; 
    font-weight: bold; 
} 
.class 
{ 
    text-align: center; 
    margin-left: 10px; 
} 
.class .subclass 
{ 
    text-align:right; 
} 

Đưa lên một chút không gian hơn và đòi hỏi phải có một chút di chuyển để có, nhưng rất dễ dàng để làm theo . Những người lo lắng về việc tối ưu hóa luôn có thể sử dụng các công cụ thu hẹp CSS để tạo các tệp CSS.

Cuối cùng miễn là bạn là rất phù hợp với công việc của bạn và trong một nhóm (nếu có) thì không có câu trả lời nào chính xác hơn.

Answer 12

Có lẽ, khi bạn có nhiều selectors và một quy tắc, như thế này:

#header li a, #header li span { 
    display:inline-block; 
} 

Vì vậy, tôi thích làm:

#header li a, 
#header li span { 
    display:inline-block; 
} 

Answer 13

Tôi luôn thích phong cách này:

#something1 { 
    color   : #ffffff; 
    background  : #000000; 
} 

#something2 { 
    color   : #000000; 
    background  : #ffffff; 
} 

Nhưng yo trả lời câu hỏi của bạn: Miễn là nó hoạt động theo cùng một cách, không có cách "thích hợp" hoặc "tốt nhất" để định dạng mã của bạn. Sử dụng một phong cách thoải mái của bạn với.