Có ai thực sự đang sử dụng không gian tên css không?

Question

Lý do khiến mọi người dường như thích các kỹ thuật như SMACSS để đặt tên, vượt quá css namespaces thực tế?

Tôi đã googled điều này một chút, nhưng tôi đã không thể tìm ra bất kỳ tài nguyên tốt nào. (Nó làm cho tôi lo lắng rằng google-fu của tôi là crap (rất có thể) hoặc thông số không gian tên css là vô ích (ít có khả năng))

Answer 1

Chúng bao gồm các trường hợp sử dụng hoàn toàn khác nhau.

Không gian tên CSS là để áp dụng CSS cho tài liệu XML kết hợp các phần tử từ các không gian tên XML khác nhau. ví dụ. để bạn có thể nhắm mục tiêu <foo:p> và <bar:p> mà không bị nhầm lẫn.

SMACSS bao gồm các kỹ thuật viết CSS mạnh mẽ không can thiệp vào các phần khác của trang. ví dụ. để .title trong sổ địa chỉ của bạn HTML không bị lúng túng với .title trong danh sách các ấn phẩm của bạn HTML.

---

Thông tin chi tiết từ spec:

Lưu ý: Trong HTML, thuộc tính xmlns hoàn toàn không có hiệu lực. Nó cơ bản là một bùa. Chỉ cho phép di chuyển đến và từ XHTML dễ dàng hơn một chút. Khi được phân tích bằng trình phân tích cú pháp HTML, thuộc tính sẽ kết thúc trong không có vùng tên, không phải là không gian tên "http://www.w3.org/2000/xmlns/" như thuộc tính khai báo không gian tên trong XML.

Answer 2

Namespaces có một cú pháp khá khó chịu trong CSS, bởi vì ":" nhân vật namespace phải được thoát ra bằng một dấu gạch chéo hàng đầu để phân biệt nó từ một pseudo-class:

html\:img { 
    border: 2px solid black; 
} 
html\:a:visited html\:img { 
    border-color: grey; 
} 

này chỉ thực sự hữu ích khi nhúng HTML bên trong một tài liệu XML. Khi thêm không gian tên html, các phần tử từ không gian tên HTML được hiển thị chính xác như chúng sẽ xuất hiện trong HTML, cho phép truy cập vào các khả năng chưa được CSS cung cấp.

<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"> 
    ... 
    <restaurant> 
    <name>Red Apple Inn</name> 
    <logo> 
     <HTML:A href="javascript:alert('Visit the Red Apple Inn!')"> 
     <HTML:IMG src="red-apple.gif" height="50" width="200"/> 
     </HTML:A> 
    </logo> 
    ... 

Trong ngữ cảnh HTML5, tôi không thể nghĩ ra bất kỳ trường hợp nào bạn cần. Nơi duy nhất mà tôi đã nhìn thấy các không gian tên trong CSS cho đến nay, là CSS mặc định của Webkit cho SVG hoặc MathML và chúng sử dụng một cú pháp khác: quy tắc @namespace.

Ví dụ, đây là mã từ WebKit/webkit/blob/master/Source/WebCore/css/mathml.css:

@namespace "http://www.w3.org/1998/Math/MathML"; 

math { 
    -webkit-line-box-contain: glyphs replaced; 
    text-indent: 0; 
    direction: ltr; 
} 
mtext { 
    line-height: 1.0; 
} 

... 

Đây là mã từ WebKit/webkit/blob/master/Source/WebCore/css/svg.css:

@namespace "http://www.w3.org/2000/svg"; 
@namespace html "http://www.w3.org/1999/xhtml"; 

svg:not(:root), symbol, image, marker, pattern, foreignObject { 
    overflow: hidden 
} 

svg:root { 
    width: 100%; 
    height: 100% 
} 

text, foreignObject { 
    display: block 
} 

...