WEB UI篇——以结构化的方式写CSS
我的職業是碼農，以前有人稱這職業叫程序員或軟件工程師，不過這些不重要，重要的是我這次寫的東西和碼農幾乎不相干，我接觸CSS的時間不長，2年多一點，并且只有在極端的情況下我才會自己動手寫CSS，例如：需要掙些錢來養活自己，或者需要將外包出去的難看的前臺重寫。下面我將要向大家描述如何以層次-結構化的方式來寫CSS。
眾所周知，一個好的WEB UI工程師注重結構化的HTML+CSS代碼，而不僅僅是還原之前的圖片設計，這其中區別很大，前者能為代碼美觀及維護帶來非常大的幫助，而后者，除了完成“任務”，幾乎就是一團糟。
html代碼經常以嵌套的方式出現，例如<body>中可能嵌套了<div>，<div>中又嵌套了<ul>，之后又嵌套了<li>,而li中可能再嵌套label,em,p,i,input,dl,dt,dd,....等等.總之我們將盡可能的組合這些html元素，以便思維更加清晰地展現頁面各部分。
假設我們要設計一個注冊用戶的表單，效果如下:
我可能會有如下的HTML（HTML5）：
第一種方式：
????<div?class="line">
????????<label?class="lbl">用戶名：</label>
????????<input?class="txt"?id="tbxUserName"?/>
????????<em?class="em">*</em>
????????<span?class="sp">用于登錄。</span>
????</div>
????<div?class="line">
????????<label?class="lbl">郵箱：</label>
????????<input?class="txt"?id="tbxEmail"?/>
????????<em?class="em">*</em>
????????<span?class="sp">用于找回密碼。</span>
????</div>
????<div?class="line">
????????<label?class="lbl">驗證碼：</label>
????????<input?class="txt"?id="tbxVerify"?/>
????????<em?class="em">*</em>
????????<a?class="va">看不清？換一張。</a>
????</div>
</div>
相應的CSS代碼如下：（CSS 2.0）
?
.line{height:40px;margin-top:10px;}.lbl{width:140px;text-align:right;}
.txt{height:20px;border:#ff0000?1px?solid;}
.em{color:#FF0000}
.lbl,.txt,.em,.va{float:left;}
第二種方式（HTML5）：
?
<div?id="reg">????<div>
????????<label>用戶名：</label>
????????<input?id="tbxUserName"?/>
????????<em>*</em>
????????<span>用于登錄。</span>
????</div>
????<div>
????????<label>郵箱：</label>
????????<input?id="tbxEmail"?/>
????????<em>*</em>
????????<span>用于找回密碼。</span>
????</div>
????<div>
????????<label>驗證碼：</label>
????????<input?id="tbxVerify"?/>
????????<em>*</em>
????????<a>看不清？換一張。</a>
????</div>
</div>
CSS的代碼如下（CSS 2.0）
?
#reg?div{height:40px;margin-top:10px;}/*以reg為起點，進行各子元素的查找*/#reg?div?label{width:140px;text-align:right;}
#reg?div?*{float:left;}/*讓每一行的子元素乖乖向左上方擠，避免因各瀏覽器原因各元素水平不對齊*/
#reg?div?input{height:20px;border:#ff0000?1px?solid;}
#reg?div?em{?color:#FF0000}
?
?這就好比我們要建造一個小型金字塔,以現有技術，一般有兩種方式，第一種就是從底部開始用石頭開始堆，一直堆到頂部；第二種是直接建造一個模型，從頂部開個洞，然后用泵車從頂部澆注，最終成型。
比較兩種方式，不難發現第一種比較原始，必須注意每一個細節，如果發現中間某處出現問題，需要仔細對照HTML文檔與CSS文檔，找出有問題的HTML元素及其樣式表，另外，更重要的是還要對照該元素的上一層及其它相關的樣式表。
而第二種，顯然要好很多，一旦發現某個HTML元素樣式有問題，我們只需找到其“金字塔”的頂部入口，然后找到其具體定義，對于少量的代碼而言，這兩者的區別還不是那么明顯，而當文檔達到一定數量后，這個區別就會相當明顯了：前者令人痛苦，后者令人舒服。
?
當然，世上沒有最好，只有更好，有些時候，我們可能需要將兩者結合起來，例如，在其它頁面的HTML代碼中我有一個快捷登錄框
<input?id="tbxUserName"?/>
出于方便我有了如下CSS定義:
?
#tbxUserName{width:50px;border:red?1px?solid;height:20px;}
之前看是完美的，但卻留下了一個隱患，當其它的頁面中再次出現ID為tbxUserName的input時候，效果就會受其影響，例如本文第一段代碼。這時，我們就得要想辦法規定好這個#tbxUserName的作用域,一般來說這樣寫：
?
#reg?div?#tbxUserName{width:100px;border:green?1px?solid;}
這種寫法被稱為CSS的覆寫。
?
采用結構清晰的方式去寫CSS代碼，會留下整潔的HTML頁面，便于移植與重新布局，在修改的時候，我們只需要找到入口，就能輕易改寫整個樣式塊；
而采用第一種混沌的方式去寫CSS代碼，結果會留下難以維護的HTML頁面，一旦重新修改布局，所有的以class這種方式的樣式全部都要改寫，工作量甚至大于重新寫。
另外，談一下CSS的復用。
我們寫每一行CSS代碼，總指望它能被多次重復使用，簡稱“復用”，很多人明白這個道理，但實際過程中可能一不小心就寫得很糟糕，當然很多美工會理直氣壯地說“時間緊，錢又給的少，你叫我怎么辦？”。我要說的是，只有你的品質上去了，才有資格和別人談錢，至少我會給高品質的作品更高的報酬。我經常會以打工者的身份接到“改版”的任務，而我又經常外包給別人；我經常和雇主談比較高的報酬，而我又對美工如此苛刻，我感覺自己是個奇怪的家伙。
談到“復用”，這在各行各業都有表現，不僅僅在計算機領域。復用的重要性不言而喻，但為保證不跑題，這里不作贅述。
當然也有許多的情況下我們不能復用。
總的說來，以.xxx{}形式命名的style，都是期望復用的，以#xxx{}方式命名的style,不期望復用，而以tagName{}方式命名的style，則是期望有作用域的，如果它沒有外層嵌套，那么它是全局作用域的。
還是以上面的注冊表單為例，例如我們要給每一行后面的SPAN加上一些變化，當什么也不做的時候，就顯示當前信息，并帶有“!”號的前置圖標，當輸入錯誤的時候，顯示出錯內容，并顯示“X”圖標，當輸入正確時，顯示“√”圖標。這時候，我必須復用一些代碼來保證效果的完整，且不產生多余代碼:
此示例中借助了一些簡單的javascript腳本幫我們實現。
?
?
<div?id="reg">????<div>
????????<label>用戶名：</label>
????????<input?id="tbxUserName"?/>
????????<em>*</em>
????????<span?id="chkUNameResult"?class="formMsgBox?formMsg">用于登錄。</span>
????</div>
</div>
?
?
.formMsgBox{float:left;border:solid?1px?#EB9C7D;margin-left:5px;padding-right:5px;}.formMsg{background:url(msg_bg.gif)?5px?-102px?no-repeat;?height:22px;line-height:22px;padding-left:25px;font-size:12px;}
.formMsgErr{background-position:5px?-22px;}
.formMsgSuc{background-position:5px?-62px;}
?
?
?
<script?language="javascript">????var?chkUNameResult?=?document.getElementById("chkUNameResult");
????document.getElementById("tbxUserName").onblur?=?function(){
????????var?json?=?{result:"",msg:""};
????????if(this.value?==?""){
????????????chkUNameResult.className="formMsgBox?formMsg?formMsgErr";
????????????json.result?=?"Fail";
????????????jsong.msg?=?"用戶名不能為空";
????????}else{
????????????chkUNameResult.className="formMsgBox?formMsg?formMsgSuc";
????????????json.result?=?"Success";????????????
????????}
????????setMsg(json,chkUNameResult);
????}
????function?setMsg(json,dom){
????????dom.innerHTML?=?json.result?==?"Success" ? "" : json.msg;
????}
</script>
最后,附上最后一個示例的文件:Demo.rar.此示例僅供參考,不代表其能用作商業代碼.
轉載于:https://www.cnblogs.com/CoreCaiNiao/archive/2011/06/16/2082814.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的WEB UI篇——以结构化的方式写CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android中获取网络图片的三种方法
- 下一篇： CSS之简单的双引号