老
網(wǎng)站改版建設(shè)一個(gè)網(wǎng)站設(shè)計(jì)前端工程師的BB鳥規(guī)則經(jīng)驗(yàn)分享。老網(wǎng)站運(yùn)行到一定年限的時(shí)候，不管是網(wǎng)站前端視覺效果還是網(wǎng)站代碼本身，從網(wǎng)站建設(shè)公司的專業(yè)角度來說都需要改版另行設(shè)計(jì)或者推到重新建設(shè)，以下是深圳
網(wǎng)站建設(shè)公司資深框架設(shè)計(jì)師的設(shè)計(jì)心得，特在此與各位分享，希望能給您的網(wǎng)站改版設(shè)計(jì)工作有所啟發(fā)與幫助。
我剛開始編寫 BB 鳥規(guī)則時(shí)，規(guī)則數(shù)目是現(xiàn)在的兩倍。而當(dāng)規(guī)則數(shù)目達(dá)到了兩位數(shù)，我發(fā)現(xiàn)每寫一條規(guī)則，我都會想出兩條、三條甚至更多的規(guī)則。等做完這么多規(guī)則，估計(jì)花都謝了。我意識到我根本不是在制定規(guī)則，而是在寫整個(gè)系統(tǒng)的說明文檔，然而問題是我已經(jīng)寫過文檔了。事實(shí)上，我并不需要為歪心狼受傷倒下的結(jié)局，詳細(xì)地描述歪心狼如何從最大的分類開始查找、選購商品，然后幾秒鐘后商品就出現(xiàn)在他的信箱里。我只需要規(guī)定“沒有外力可以傷害歪心狼，除非他很笨或是他買的高科技產(chǎn)品出故障”。我需要的是精簡的、固定的規(guī)則列表，而不是一個(gè)完全展開的詳細(xì)說明。很顯然，我還需要一些規(guī)范來約束規(guī)則的制定。現(xiàn)在我知道，你大概在想“這要么是過分的分解，要么是愚蠢的嘗試”。但是就像一個(gè)好看的導(dǎo)航條會有它獨(dú)特的設(shè)計(jì)和規(guī)則，一個(gè)扎實(shí)的數(shù)據(jù)寫入模式也是按照父模式的規(guī)范寫的，我們的 BB 鳥規(guī)則也需要遵循它自己的管理規(guī)范。
下面就是網(wǎng)站建設(shè)公司資深設(shè)計(jì)師制定 BB 鳥規(guī)則時(shí)需遵循的規(guī)范：
· 只包含不可變的規(guī)則，而不是籠統(tǒng)的說明
· 總是把規(guī)則提煉成最簡單的表達(dá)
· 總是首先說明規(guī)則是什么，再說明“如果不這樣，那么會如何”
· 每個(gè)規(guī)則必須包含以下詞中的一個(gè)——總是、永遠(yuǎn)不要、只有、每一個(gè)、不要、要
使用這些規(guī)則可以幫助我們避免寫了很多內(nèi)容卻始終說不到點(diǎn)子上。聰明的讀者已經(jīng)發(fā)現(xiàn)這四條規(guī)則和 BB 鳥的設(shè)計(jì)原則是相吻合的。
在對這個(gè)列表進(jìn)行了改寫、重寫、刪除等操作后，我們最后制定了自己的設(shè)計(jì)系統(tǒng)的規(guī)則列表。
· 永遠(yuǎn)不要給布局的子內(nèi)容強(qiáng)加內(nèi)邊距和元素樣式。布局只關(guān)注垂直對齊、水平對齊和文字間距。
· 主題和別的數(shù)據(jù)屬性值永遠(yuǎn)不要強(qiáng)制改變外觀；它們必須保持布局、組件和元素可以應(yīng)用于其上。
· 組件總是貼著它的父容器的四個(gè)邊，元素都沒有上外邊距和左外邊距，所有的最后節(jié)點(diǎn)（最右邊和最下邊的節(jié)點(diǎn)）的外邊距都會被清除。
· 組件本身永遠(yuǎn)不要添加背景、寬度、浮動、內(nèi)邊距和外邊距的樣式，組件樣式是組件內(nèi)元素的樣式。
· 每個(gè)元素都有且只有一個(gè)唯一的且作用域只在組件內(nèi)的 CSS 類名。所有的樣式都是直接應(yīng)用到這個(gè)選擇器上，并且只有上下文和主題能修改元素的樣式。
· 永遠(yuǎn)不要在元素上使用上外邊距，第一個(gè)元素總是貼著它所在組件的頂部。
· JavaScript 永遠(yuǎn)不要綁定任何元素的 CSS 類名，選中元素通過數(shù)據(jù)屬性實(shí)現(xiàn)。
這些規(guī)則不僅覆蓋了布局和組件的特定關(guān)系，也覆蓋了設(shè)計(jì)系統(tǒng)的其他部分，包括主題、元素和 JavaScript。接下來，我們深入到我們做過的一些關(guān)于 HTML 和 CSS 的更有趣的規(guī)定。
網(wǎng)站改版關(guān)于前端設(shè)計(jì)經(jīng)驗(yàn)分享之每個(gè)標(biāo)簽指定唯一的選擇器
過去，我花費(fèi)了太多時(shí)間創(chuàng)造通用的、萬能的、可以應(yīng)用到任意元素上的 CSS 類。但是當(dāng)項(xiàng)目發(fā)展壯大時(shí)，你才會明白維護(hù)它們有多難。因?yàn)檫@些 CSS 類具有通用性，改動了樣式有可能會影響到很多地方，所以創(chuàng)造新的 CSS 類往往比更新原有的 CSS 類更容易。因此，給每一個(gè)元素創(chuàng)造單一的、唯一的、扁平的 CSS 類是我最想做的事情之一。你可以在網(wǎng)站建設(shè)公司博納網(wǎng)絡(luò)本站后面相關(guān)文章中看到很多與此相關(guān)的內(nèi)容，而這個(gè)原則是我們履行“每個(gè)元素都有且只有一個(gè)唯一的、作用域只在組件內(nèi)的 CSS 類名”規(guī)則的關(guān)鍵。
網(wǎng)站改版關(guān)于前端設(shè)計(jì)經(jīng)驗(yàn)分享之單一責(zé)任原則
在某些領(lǐng)域，CSS 的單一責(zé)任原則意味著每個(gè) CSS 類都有一個(gè)簡單的、高度聚焦的責(zé)任，所以在某個(gè)場景下，用一個(gè) CSS 類來設(shè)置元素的盒模型的屬性，另一個(gè)設(shè)置排版，還有一個(gè)設(shè)置顏色和背景。對于設(shè)計(jì)系統(tǒng)和規(guī)則列表來說，這個(gè)單一責(zé)任原則意味著我們創(chuàng)建的每一個(gè) CSS 類都用于單一的這些可選的上下文允許我們給任何組件創(chuàng)建變動，而不影響組件的原始樣式。這些變動都是可控的，作用域限制在組件的 CSS 類中，并且只在組件的 Sass 文件里定義。如果讓同一個(gè)修飾符和上下文影響多個(gè)組件，這的確需要我們做一些重復(fù)的工作。但隨著系統(tǒng)規(guī)模日漸擴(kuò)展，我從來沒有后悔過。不僅因?yàn)橥ㄟ^混入（mixin）和擴(kuò)展（extend）讓復(fù)用修飾符和上下文變得更簡單，而且組件變動的數(shù)量有限，這幫助我們避免了找錯難的問題，也幫助我們提高了創(chuàng)造更全面的視覺還原的能力。因?yàn)樗行揎椃蜕舷挛亩级x在 Sass 文件里，所以我們可以查看任意組件，確切地知悉其可能的視覺變化。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“老網(wǎng)站改版建設(shè)一個(gè)網(wǎng)站設(shè)計(jì)前端工程師的BB鳥規(guī)則經(jīng)驗(yàn)分享”就到這里。如果您需要改版您的老網(wǎng)站或者需要重新建設(shè)新的網(wǎng)站，對網(wǎng)站前端設(shè)計(jì)沒什么概念的話，您可以聯(lián)系我們在線客服，免費(fèi)獲取設(shè)計(jì)解決方案，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
