HTML

<row center> 
    <column number="6">A</column> 
</row>

CSS/LESS

row { 
    background: #444; 
    display: flex; 

    &[center] { 
    justify-content: center; 
    } 

    column { 
    background: #222; 
    color: #fff; 

    &[number="6"] { 
     padding: 1rem; 
     width: 50%; 
    } 
    } 
}

來源

2015-11-04 Altaula

我不認爲有任何重大的負面影響。使用自定義元素的目的是什麼？ – Sachin

否定性是一些瀏覽器可能無法識別它們導致不可預知的行爲。更好的問題是「使用它們而不是傳統元素的最重要原因是什麼？」 –

我想要更具可讀性的代碼......沒有div – Altaula

彌補自己的標記語言：

可能與添加到HTML的未來（至少如果附加功能發生衝突你告訴瀏覽器它是一個帶有Content-Type: text/html HTTP標頭的HTML）。
用戶代理無法完全理解您無法完全用CSS覆蓋的內容（例如屏幕閱讀器，文本瀏覽器和搜索引擎）。
將來可能不得不維護你的代碼的其他開發人員不會理解它。
不能使用HTML驗證一個便宜的，基本的QA通過

來源

2015-11-04 23:42:06 Quentin

W3C正在開發的一個標準調用Custom Elements，它允許作者定義自己的元素。你可以在這裏讀到它：

Custom Elements, defining new elements in HTML
自定義元素，網站開發者定義新類型的HTML 元素。該規範是幾個新的API原語之一，登錄在Web Components傘下，但它很可能是最重要的。未經自定義元素解鎖功能不存在Web組件：
- 定義新的HTML/DOM元素
- 創建從其他元素擴展元素
- 邏輯上的自定義功能捆綁在一起成爲一個單一的標籤
- 擴展現有DOM元素的API
Introduction to Custom Elements

自定義元素使開發人員能夠創建自己的自定義HTML標記，讓他們在自己的網站和應用程序使用這些標籤，並啓用容易組件的重用。
W3C Custom Elements

爲Web開發人員構建自己的，全功能的 DOM元素的方法。儘管在HTML中使用來創建DOM元素的可能性很大，但這些元素並不是很有用。通過爲Web開發人員提供了通知解析器如何正確構建元素並對元素的生命週期變化作出反應的方法，該規範消除了對作爲渲染視圖腳手架的DOM-as-a-view-scaffolding的需求今天在大多數web 框架或庫中存在。

不過，如果你今天的目標是寫出更可讀的代碼，然後再考慮用標準的HTML元素（或只是div和span元素）堅持和使用class和id值的描述。您可以像使用類和ID一樣描述您的喜好。見我的答案在這裏指導：

來源

2015-11-04 23:42:22

重要提示從規格：*出版物作爲編輯的草案並不意味着背書從規範W3C成員* – Quentin

其他重要提示：*開發人員必須使用ARIA角色，狀態和屬性*（這可能會破壞其簡單的標記筆者的目標） – Quentin

@quentin，*自定義元素*傳達的語義（我相信你知道）是HTML5網絡組件的一部分，它正在被W3C，谷歌和其他大玩家所追求和開發。我們的目標是讓所有人都可以使用，所以我不確定你打破作者簡單目標的特徵是否有效。我認爲未來將不會遇到任何困難。 –

的情況下，對自定義元素已經被其他的答案做出。作爲這個想法的替代方案，HTML 5 has a number of new elements。這些措施包括<article>，<aside>，<figure>，<header>，<nav>和<section>。使用這些元素應該讓你的頁面佈局語義上有意義，救你脫離令人費解的<div>和<span>元素的海洋，和現代瀏覽器可以理解。

來源

2015-11-05 00:29:23 miken32

他們是別人的語義元素非常有用：列表（'ul' /'ol' /'li'，'dl' /'dt' /'dd'），'table'，'main'，... –

我可以使用自定義元素和屬性作爲有效的HTML嗎？

HTML

CSS/LESS

回答

相關問題