問題描述

我們常說表現、內容、行為要分離，在CSS3之前時我們分辨得很清楚。但是現在發現利用CSS3你可以做純CSS的選項卡，純CSS的下拉菜單，可以實現緩動效果，動畫效果，利用 input[type=checkbox]:checked還可以實現點擊響應。CSS3干了不少JavaScript一直在做的事。CSS3 的 content 還可以生成HTML內容。這個時候如何理解“表現、內容、行為”的分離？

看了這篇文章 談談我的“分離”觀 還是疑惑。我們說不能認為腳本就是行為，腳本可以生成內容也可以改變表現，但里面提到“行為，指由用戶觸發的由腳本與服務器端的交互”，那么彈窗也不算行為？或者說到了現在，已經沒必要分清楚？你怎么理解？

問題解答

這問題還挺有意思。

就我的理解，目前css3還是在做表現所做的事情，表現的東西，不管是否靜與動，它與行為最大的區別在于，行為更大程度是再說與用戶的事件交互上，比如點擊了表單提交按鈕，檢驗出不合格的字段給出提示

當然表單驗證在html5這個代表內容的部分也改進做了很多，這我認為只是為了方便開發者的一個功能，其實嚴格來說也屬于數據，html5可看成是瀏覽器才能解析的xml，只不過對某些屬性提供了瀏覽器自己默認的處理方式，比如說required='required'，表示這個字段的數據是用戶必須提供的，本質上還是一個描述，不是行為，如果默認的處理方式不滿意，你也可以用javascript去改變他

當然其他的一些事件交互，想網頁游戲，就更不用說了，那必然要依靠javascript對事件進行一些相應處理

而反過來，在css3沒出現之前，javascript做的一些僅僅是很炫但是不與用戶交互的動畫效果，其實也算是表現。

而對于css3生成內容，這個地方可能你理解有一個誤區，它必定不是生成html的內容，而也是為了表現，如果這個概念不理解清楚，很可能會導致css3 content的濫用，比如說，給blockquote或者q標簽的前后加引號，就是一個很好的運用，但是給一段話的后面加另外一段話，就是一個濫用的壞栗子。其實你可以這么去想，css3是為了裝飾html這個內容的，所以每當你做完一個頁面的時候，最好把css關掉看看html在默認的樣式下是否依然還具有非常良好的結構和完整的數據（比如剛才說的壞例子，那已經少數據了）,如果在脫掉css3這層漂亮的外衣下依然能一眼就分辨html的胴體，那才是真的搞清楚css和html的職責了

css 提供的功能基本上都可以歸類為表現層的東西.

這里要分兩方面來說，

這些用法的引入讓我們不用通過js就可以讓某些元素產生動態的變化效果.

在我的定義中行為是能夠跟據一定的邏輯對某些動作進行響應。

而這些純 css3的動態效果，他們本身沒有什么邏輯可言，不能對用戶的動作進行響應。只能按照預定的規則來變化。范例

其實就有點類似 gif 格式的圖片。雖然它是動態的，但它還是圖片。

css偽類并不是 css3 才引入的，在css 1時代就有。

與問題相關的偽類如下。加粗的部分為 css3 引入的新偽類。

鏈接相關的偽類:link:visited:hover:active:target

表單元素相關的偽類:focus:enabled:disabled:checked:indeterminate

通過 :target 偽類確實可以實現純css的選項卡,彈出框等以前只有js才能實現的功能。范例在此

原理是通過瀏覽器url上的描點來找到對應的元素。然后對其進行顯示隱藏相關的風格變化。下面是簡單的lightbox的例子。

<a href='http://www.b3g6.com/wenda/6232.html#lightbox'>點擊顯示彈出框</a><p id='lightbox'> 這是一個彈出框</p><style type='text/css'> #lightbox { display:none; // 默認隱藏 position: fixed; width: 300px; height: 300px; background: red; } #lightbox:target { display:block; // 當描點選中時顯示 }</style>

這就跟 :hover 偽類一樣。

<a href='http://www.b3g6.com/wenda/6232.html#'>鏈接</a><style type='text/css'> a { color:black; // 默認黑色字體 } a:hover { color:red; // 當鼠標在它上面時顯示為紅色字體 }</style>

如果我們定義 :hover 不算為行為的話, 那么 :target 以及其他類似的偽類也不能搞特殊。

以上僅是我的理解。

每個人對于表現層與行為層的理解可能不相同，就如 @釀泉 所說的，要理解它的思想，而不是糾結于它的教條。

我覺得 這其實根本不需要分的那么細Javascript還不是有很多代碼為的是表現？你可以將偏向于動作的CSS或者JS和偏向于表現的分開，發布的時候合并就行了便于維護就好了而不是糾結教條我以前也糾結過MVC具體到底是怎么分離的，但現在發現很多框架分離的方法都不一樣，有分離的思想并且簡單易懂便于維護就好了吧