我重構的時候,學習了一些行業標準的做法。主要思路來源于以下一些,比如Rest,Grid,Dry等等(
1,Css文件的組織。
Css文件采用按照Rest中的資源來進行組織, 比如User,那就有一個user.css,如果這個資源的比較復雜, 可以進一步分解成user_new,user_edit等等。某些共用的組件,可以再分出來,比如toolbar.css
2,根選擇器使用class,其他的盡量使用原生選擇器,,根選擇器一般是網頁Grid系統中大塊結構。
例子: table.user td span{font-size:12px}
即使使用class,也帶上原生標簽
例子: table.user td span.user{font-size:12px}
這樣做的最主要的原因是給class取名實在在是頭痛。名字還容易沖突。取名的時候要考慮語義,其實我們只不過為了美化一下顯示。采用了我這種做法的Css文件,不看Html源碼, 我也能知道我正在干什么了。
3,文本標簽的使用。
很多網站使用span,因為我避免使用class,那么同一層級span只能使用一次。那盡量使 用<i></i><em></em><strong>< /strong><cite></cite>,如果是不同層級,那么多種標簽組合也夠用了
例如 <div><em>張三</em>購買了<strong>3個</strong>面包</div>
相對的css就是 div.score em{color:red}
div.scroe strong{color:greeen}
塊元素,要靈活運用<h1>到<h6>他們和Div是等價的。
4,使用class的情況
a,當某個塊是Grid中的基本塊的時候 b,供javascript調用的時候,c,萬不得已的情況下。也就是說利用原生選擇器就能解決的問題,就不要用class。
5,美工只負責大括號里面的內容
比如 div.score em{color:red; font:12px}中美工只負責調整{}中的內容,程序員負責{}前的內容。由于不輕易引入class,大家比較容易溝通。
6,工作流程。
1,美工利用Grid系統做出設計圖
2,設計圖中的基本塊的命名,用來做根選器的class名。
3,程序員將做好的html和css交給美工, css中的大括號內容程序員可以不寫或者少寫。
4,美工只調整css中{}的內容,直到滿意為止, 如果發覺{}前的內容不合理,和程序員商量。(注意,由于不要求美工看源代碼,只要求看Css, 而css中主要是原生標簽,所以基本能看懂,這樣不管是asp.net,jsp,php都不需要美工關心了)
基本就這么多了, 其他的一時也想不起來,歡迎指出問題和缺點。
本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司!
文章標題:網頁重構的一些技巧
標題來源:http://m.newbst.com/news33/317483.html
成都網站建設公司_創新互聯,為您提供外貿建站、動態網站、網站排名、網站建設、App開發、虛擬主機
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯