2017-03-06 22 views
5

Với việc giới thiệu các vars css, tôi muốn biết lý do của lý do tại sao-- sẽ được chọn làm cách biểu thị var.Có bất kỳ giới hạn kỹ thuật nào trong CSS dẫn đến quyết định sử dụng `--` cho vars không?

Xem xét CSS có chức năng bán calc có khả năng bán, tôi cảm thấy như -- có thể dễ dàng bị nhầm lẫn với toán tử giảm ở các ngôn ngữ khác.

Tôi tò mò nếu có bất kỳ ý nghĩa lịch sử hoặc giới hạn kỹ thuật nào dẫn đến việc chọn --. Đôi đặc biệt làm rối loạn tôi, khi các dấu CSS thường là đĩa đơn (#,., @, V.v.). Cũng sử dụng một biểu tượng đã được sử dụng bởi những thứ khác cũng là thú vị (đặc biệt là khi nó hợp lệ cho một tên lớp học để bắt đầu với --).

Ví dụ:

@custom-media --lt-sm (width < 576px); 
--grey300: #e0e0e0; 

.navbarItem { 
    display: inline-block; 
    text-align: center; 
    border-top: 1px solid var(--grey300); 
    border-left: 1px solid var(--grey300); 

    @media (--lt-sm) { 
     flex-grow: 1; 
    } 

    &:last-child { 
     border-right: 1px solid var(--grey300); 
    } 
} 

Disclaimer

Một số có thể tranh luận tính hợp lệ của câu hỏi này, nhưng hiểu được lý do tại sao là một kỹ thuật quan trọng để ghi nhớ một khái niệm cụ thể.

Các cuộc thảo luận duy nhất mà tôi có thể tìm thấy liên quan đến nó:

Trong Telcon ngày hôm nay, chúng tôi quyết tâm sử dụng một "-" tiền tố để chỉ thuộc tính tùy chỉnh và điều chỉnh khác.

Chúng tôi đã thảo luận xem tiền tố có được duy trì hoặc bị giảm khi đề cập đến thuộc tính tùy chỉnh từ một hàm var(), nhưng không thực hiện giải quyết . Thảo luận trong cuộc gọi nghiêng về phía tiền tố , như tôi hiện đang có các thuộc tính khác nhau, nhưng một số bên thảo luận với Simon và Sylvain lập luận để sử dụng tên đầy đủ, như có những trường hợp khó hiểu như "- 0" hoặc "----".

Vì vậy, trong khi tôi hiểu sự nhầm lẫn tiềm năng gây ra bởi tác giả có thể nghĩ rằng var() có thể mất bất kỳ tên thuộc tính như một cuộc tranh cãi , tôi nghĩ rằng nó bị bác bỏ bởi sự nhầm lẫn về những gì cần phải được thoát trong những hoàn cảnh khác nhau. Quy tắc thoát luôn luôn rất gây nhầm lẫn cho tác giả, vì vậy tôi sẽ đi với "sử dụng thuộc tính tùy chỉnh tên theo nghĩa đen là đối số var()".

tham khảo:

http://lists.w3.org/Archives/Public/www-style/2014Mar/0467.html

https://www.w3.org/TR/css-variables/#defining-variables

+0

Có, nhưng bạn không nên kết hợp CSS và các ngôn ngữ khác. Chắc chắn '-' loooks giống như toán tử giảm, nhưng sau đó, các từ chứa một '-' đơn lẻ giống như phép trừ khi so sánh với các ngôn ngữ khác. Vì vậy, CSS khá độc đáo! Dù sao, câu hỏi tại sao sử dụng hai dấu trừ trừ thay vì một ký tự đơn; có lẽ họ sợ họ đã hết các nhân vật duy nhất. Hầu hết những người khác đã được sử dụng. –

+0

Độc đáo không bắt đầu giải thích nó! Hoàn toàn hiểu những gì bạn đang nói, tôi đoán tại sao không chỉ sử dụng một '-' nếu họ đang nghĩ về việc chạy ra ngoài? Tôi hiểu rằng có thể có một vài lý do (hoặc không có) nhưng chỉ quan tâm nếu nó đã được thảo luận/ghi lại lý do khiến chúng ở đó vào cuối – Chris

Trả lời

4

Trên đầu trang tránh xung đột với tiền tố của nhà cung cấp bắt đầu bằng một dấu gạch ngang như được đề cập trong các câu trả lời khác, hãy nhớ rằng ngữ pháp cho nhận dạng CSS không cho phép bất kỳ điều gì khác ngoài chữ cái, số, dấu gạch ngang và dấu gạch dưới (xem section 4.1.3 của CSS2). Là một thuộc tính tùy chỉnh được biểu thị bằng bất kỳ biểu tượng nào khác, mọi triển khai CSS hiện có sẽ cần phải cập nhật hoặc thậm chí viết lại trình phân tích cú pháp của nó chỉ để chứa bất kỳ ký hiệu nào đang được sử dụng cho tên thuộc tính tùy chỉnh.

Từ số điện thoại minutes của telecon được ám chỉ trong tin nhắn, bạn có thể thấy giả thuyết tránh xung đột với tiền tố của nhà cung cấp bắt đầu bằng một dấu gạch ngang là đúng. Việc sử dụng -- đã yêu cầu thay đổi trình phân tích cú pháp nhỏ, bởi vì idents normally cannot start with double dashes (như được chỉ ra). Tôi không chắc chắn chính xác các khai báo hiện tại phân tích cú pháp (d) như thế nào, nhưng vẫn an toàn khi giả sử rằng lý do của tôi vẫn giữ nguyên: vì các id có thể bắt đầu bằng một dấu gạch ngang, tiêu thụ dấu gạch ngang đầu tiên sẽ không gây ra lỗi phân tích ngay lập tức một trình phân tích cú pháp có thể xác định xem nó có đang xem số <property> hoặc một số <custom-property-name> (hoặc sau đó gặp phải lỗi phân tích cú pháp nếu nó không hỗ trợ đạo cụ tùy chỉnh) trước khi quyết định xử lý.

Sự thay đổi này cũng được phản ánh trong css-biến Spec, trong section 2 (mà tôi cũng bao gồm here):

Một tài sảntùy chỉnh là bất cứ tài sản có tên bắt đầu với hai dấu gạch ngang (U + 002D HYPHEN-MINUS), như --foo. Sản xuất <custom-property-name> tương ứng với điều này: nó được định nghĩa là bất kỳ số nhận dạng hợp lệ nào bắt đầu bằng hai dấu gạch ngang.

Vì vậy, dấu gạch ngang được sử dụng vì chúng phù hợp với ngữ pháp hiện với chỉ những thay đổi phân tích cú pháp vị thành niên, và đôi đặc biệt để ngăn chặn đụng độ với tiền tố nhà cung cấp (lưu ý rằng dấu gạch ngang và dấu gạch chân được hoán đổi cho tiền tố nhà cung cấp, do đó, một dấu gạch dưới wouldn đơn 't cắt nó hoặc là).


Như một vấn đề của thực tế, tôi đã this very same reasoning để đáp ứng với người khác của câu hỏi chỉ một vài tuần trước, mặc dù câu hỏi của họ là không về chọn tiền tố cho tên tùy chỉnh prop.

+0

Tuyệt vời, cảm ơn @BoltClock – Chris

+0

Tôi không thể sao lưu, nhưng tôi mơ hồ ghi nhớ rằng "--prop" sử dụng lại cú pháp tiền tố của nhà cung cấp hiện tại, nhưng với "nhà cung cấp không có giá trị". Tab Atkins đã đi vào hồ sơ nói rằng ông muốn [tiết kiệm '$' cho một cái gì đó giống như nội suy thẳng] (http://www.xanthir.com/blog/b4KT0). – Tigt

1

Tôi nghĩ rằng nó đã có khả năng liên quan một cách nào đó để làm sao các nhà cung cấp có tiền tố riêng của họ, trong đó gạch nối ký hiệu là thuộc tính được bỏ qua nếu họ không được trình duyệt/trình phân tích cú pháp hiểu. Tôi nghĩ. Nó cũng là một cách mà sẽ không đụng độ với bất kỳ chức năng CSS hoặc đối tượng khác đã tồn tại.

Ví dụ preprocessors như LESS sử dụng biểu tượng @ trong khi Sass sử dụng biểu tượng $. Điều này đã được thảo luận tại số Software Engineering SE có một câu trả lời khá tốt để đi với nó.

Về cơ bản, có vẻ như vì lý do tương thích trên bất kỳ điều gì khác. Người ta có thể lập luận rằng nó cũng dễ dàng để biểu thị một biến là gì so với những thứ khác như biểu tượng & và biểu tượng %.

Dưới đây là một số additional reading về sự khác biệt của các biến CSS trên vào CSS Tricks bao gồm vani CSS, LESS và Sass, vv

0

Suy nghĩ của tôi là nó đã làm với khả năng tương thích ngược. Khi bạn thêm thứ gì đó vào CSS, bạn không chỉ phải đảm bảo cú pháp có thể được phân tích cú pháp một cách rõ ràng, bạn phải đảm bảo rằng tính năng mới sẽ không ảnh hưởng đến cách trình duyệt cũ phân tích cú pháp các phần của bảng định kiểu mà chúng thực sự có thể hiểu .

Khi các biến có thể được khai báo bên trong một tập hợp quy tắc, một dấu gạch nối có thể gây nhầm lẫn với tiền tố của nhà cung cấp. Và tên lớp trong bộ chọn lớp thực sự không được phép bắt đầu bằng hai dấu gạch nối, ít nhất là trong the CSS 2.1 spec.

Các vấn đề liên quan