您現在的位置是:電腦技術吧?>? 編程技術 ??>??編程好學嗎,什么是編程??>??正文詳情

編程好學嗎,什么是編程

仉迎波2019-11-26 14:11:26 人圍觀
簡介編程是學什么CSS被稱為級聯樣式表,所以逐層覆蓋是它的基本特性。真正的問題是維護。很多人認為CSS只是一種樣式,而不是代碼,不需要維護。所以任何一篇文章,只要你把你需要的

CSS即層疊樣式表,所以一層一層覆蓋其實是其本質特征。

真正的問題在于維護,許多人認為CSS僅是樣式,不是代碼,無需維護,所以任意書寫,只要將自己需要的樣式的優先級設為最高即可,才導致了深層級CSS的出現,因為每次添加一個樣式就必須比以前的優先級高才能在頁面看到。

深層級不僅造成維護性降低,可讀性也是一個問題,人不是機器,無法很優雅的按優先級閱讀,所以很難確認一個樣式用于哪里,其實還存在許多的冗余樣式,在任何地方都被覆蓋的樣式。

這樣的代碼在擴展性上,一開始反而是有優勢的,因為添加一個新class,無需擔心影響其他地方,但慢慢隨著項目規模的增大,頁面增多,需要復制樣式的地方也越來越多,它們之間又存在微小的差異,設計的更改,需求的變化,這一切都會將這種快餐式的CSS推進柏油坑。

因為難以維護,所以無法響應需求,所以無法復用,只能復制,惡性循環。

  正如上面所說的,問題在于可讀性、維護性、擴展性、復用性這幾個方面。

所以只要提高它們就能解決問題, 雖然這么說,也不是如此簡單的。

先來談談在CSS中,這些概念都有著怎樣的意義。

  可讀性  有人認為CSS不是程序,不需要可讀性,有人認為CSS只要寫出來就有可讀性,因為很簡單。

拋開各種預處理器不說,原生CSS結構確實簡單,沒有需要編程的部分,但仍然可能導致混亂。

原因有二,一是CSS可以層疊,其中涉及到了優先級和作用范圍,如果寫的不好,人很難讀出其中的意義,二是CSS屬性眾多,加上CSS3引入了很多用法獨特的屬性,一個選擇器可能包含幾十個屬性。

比如下面這段我隨便寫的CSS代碼:  CSS Code復制內容到剪貼板  span {  -webkit-box-shadow: 6px 4px 4px red;  -moz-box-shadow: 6px 4px 4px red;  box-shadow: 6px 4px 4px red;  }  div span {  border-width: 4px;  border-style: dotted;  border-color: blue;  }  #box {  border-left: 2px solid red;  border-bottom: 2px solid red;  }  乍一看也沒什么,都是border,大致能看出來這段CSS只是為了添加一個紅色的陰影讓box看起來比較立體。

但中間的部分似乎是搗亂的,你可能會說這太傻了,看不到嗎。

是的,當這3部分散落在上萬行的CSS中時,肯定看不到。

于是有人很自然的想起了我們可愛的瀏覽器,沒錯,在瀏覽器中可以快速找到作用于目標的CSS樣式,但這也是萬惡之源。

首先我假設你不知道中間那部分東西是為了什么而寫的,因為你是靠瀏覽器找到它的。

然后剩下兩種可能,不管三七二十一改了再說和看看它為什么存在。

前者悲劇的可能性是100%,后者悲劇的可能性是90%,因為你已經掉坑里了,很快我們會發現要修改它還牽扯到了另外的地方,接著在瀏覽器中探索到另一個莫名其妙的樣式,當你弄懂全部的時候,你應該已經把上萬行的代碼弄了個一清二楚了,也許最幸運的是,浪費了幾個小時的時間發現只需要修改一行就能達到目的。

  當然,我們可以天真的認為,只要把他們寫在一起就可以了,這樣找起來很簡單。

而我將繼續順著這樣的思路來嘗試曝露問題。

  維護性  所謂物以類聚是很有道理的,人們習慣將事物歸類,但問題是分類標準,樣式并不關心業務,無論是什么文字內容,還是功能有何不同,它在乎的只是樣式,比如文字的尺寸,間距和寬高,顏色等等。

如果簡單的將一個組件的樣式放在一起,勢必帶來的就是小段代碼的重復書寫。

不覺得有多嚴重?我來舉個栗子。

  CSS Code復制內容到剪貼板  aside {  box-shadow: 6px 4px 4px #AA3343;  }  nav {  box-shadow: 6px 4px 4px #AB3633;  }  .item {  box-shadow: 6px 4px 4px #AA3732;  }  .item.otherStatus {  box-shadow: 6px 4px 4px #AA3132;  }  繼續說上面的例子,box需要陰影,但如果這個項目的UI統一風格,包括sidebar,navigator以及item都需要這樣的陰影呢?再如果,明天客戶或者UX一拍腦袋,這個陰影應該是灰色的不該是紅色的呢?不要繼續天真的認為全局替換是救命稻草。

首先,沒有幾個網站會用red,blur做色調的,你用的應該是#AA3333,這樣的代碼,然后你發現sidebar用了#A43433,而navigator是#AB3633,等等,item有兩個狀態,而兩個狀態對應的顏色是不一樣的。

這怎么可能?但當你打開瀏覽器的時候你會發現本來就相差無幾的顏色,在陰影中變得一模一樣了,誰看的出來呢,當初使用的時候可能也不過是隨意的在mockup中取的一個顏色。

  大量的重復帶來的不僅僅是代碼的冗余,我們必須靠人力去同步它們,而人很難保證它們的修改是完全一致的,尤其是當它們中引入了一些不一致的獨特的東西時。

不要小看CSS,其后果就是進度和人力的壓力,后面就是PM有沒有讀過人月神話的事了。

  肯定有人在想,誰讓你當初要寫成這樣呢。

我們在讀代碼的時候最喜歡問,當初為什么要這么寫?但慢慢的你會讀出它的歷史,有時候它是身不由己的。

這就涉及到了下一個要討論的內容。

  擴展性  擴展性是一個具有欺騙性的東西,所謂的擴展性其實就是在現有基礎上再次開發新東西的性能,但我認為它還必須有前提條件,那就是保持可讀性與維護性。

  簡單的追求可維護性是自取滅亡,原因很簡單,將新舊代碼完全分離的時候擴展性最高,因為不必擔心對以前的部分有影響,新的樣式可以隨意發揮。

是不是很神奇,這樣想的我們寫下的代碼,肯定就是前面我們追問的代碼。

所以自己回答自己吧,當初沒考慮可讀性和維護性,只想著快點增加新的樣式,就這么寫了。

  那什么才是一個好的擴展性呢,簡單來說,就是多功能產品。

比如一個box,也許它的樣式就時  復用性  似乎我一直在說的就是重復,那我們就來說說復用性,如何才能復用CSS代碼是一個很大的問題,比如粒度,是一兩個屬性進行復用還是一大組選擇器進行復用呢,再比如對象,是為了class復用屬性,還是為了html復用class呢。

這些選擇不算太重要,但是帶來的影響卻很重大,可以說是整個CSS結構的改變。

下面繼續用box的陰影來討論復用。

  CSS Code復制內容到剪貼板  .shadow {  -webkit-box-shadow: 6px 4px 4px #A93334;  -moz-box-shadow: 6px 4px 4px #A93334;  box-shadow: 6px 4px 4px #A93334;  border-left: 2px solid #A933349;  border-bottom: 2px solid #A933349;  }  這樣看起來我有了一個shadow的class可以給任意的目標加上這個陰影了,但這導致了一個復用的問題,和上面那段搗亂的CSS樣式一樣,如果item已有另外2個border了,那這個class是無法去除的。

所以復用時不僅要考慮需要什么,還要考慮不需要什么。

另外一些必須的屬性比如display還有overflow等也是要考慮的,因為user agent的原因,很多屬性是隱藏在element中的。

版權聲明:本文由 仉迎波 整理編輯。

原標題:編程是做什么的,編程入門

轉載注明出處:http://www.dn9ww09s.icu/program/14475.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 理性農業app,理性農業app官網

    理性農業app,理性農業app官網 相關圖片理性農業總部在哪里理性農業是近年來朋友圈里流行的一款軟件。為了提高理性農業的知名度,理性農業特別推出了新的推廣和獎勵功能。用戶獲得邀請碼后,邀請好友下載并注冊即可...

  • 圖形元件轉換為圖形,圖形元件

    圖形元件轉換為圖形,圖形元件 相關圖片圖形和位圖元件如何在flash中將圖形轉換成組件?一。打開閃存軟件。2。單擊主頁面,如圖所示,以創建新的動畫畫布。三。畫布將位于軟件的中心。四。在左邊的工具中,我們找到矩...

  • tim移動在線真的在線嘛,tim在線是手機還是電腦

    tim移動在線真的在線嘛,tim在線是手機還是電腦 相關圖片用tim的都是些什么人Tim是騰訊QQ開發的一款輕量級聊天版QQ,常用于與QQ進行比較。騰訊的實時通訊聊天應用和騰訊的實時通訊聊天應用有什么區別?這個應用程序的功能比Q Q多,但是版...

  • 如何解決音頻的嵌入,如何將音頻嵌入ppt

    如何解決音頻的嵌入,如何將音頻嵌入ppt 相關圖片ppt音頻怎么刪除一。設置聲音對象,使用load()方法加載外部MP3播放。讓聲音對象監聽sampledata事件,以便可以播放程序動態生成的聲音,例如:下面的示例播放一個簡單的wpsppt音頻放不...

  • 金立s10參數配置,金立s10參數配置詳情

    金立s10參數配置,金立s10參數配置詳情 相關圖片金立s10bl參數配置錦里移動S10已于上月正式發布。金立S10還邀請了人氣男歌手薛若琪作為他們的代言人。那么,金立移動S10多少錢?我想買金立移動S10,但我不知道它的價格和配置參金立...

  • 怎么修改圖片尺寸,圖片尺寸

    怎么修改圖片尺寸,圖片尺寸 相關圖片二寸照片的尺寸是多少在設計網頁時,通常需要找到一張寬度和長度合適的圖片來填充塊,或者測試不同大小圖片的性能。這可能會浪費很多時間,甚至會自己制作一些特殊尺寸的圖片...

  • mobike lite,mobike怎么用

    mobike lite,mobike怎么用 相關圖片mobike音箱如何配對我想經常騎摩比自行車的人一定知道了。現在打開Moby bike的Android主界面,你會發現有兩個選擇。一個是我們常見的摩拜人,另一個是摩拜人。所以摩比摩比摩molite...

  • 怎么提取ppt的音樂,怎樣將ppt里面的音樂提取出來

    怎么提取ppt的音樂,怎樣將ppt里面的音樂提取出來 相關圖片ppt里音樂導出上一次,超人編輯教你如何在PPT中制作主版本。這一次,超人編輯帶給你的還是一門PPT相關課程,內容是如何從PPT中提取音樂。超人小編相信,當你在PPT上聽到上帝ppt音樂...

  • 鉛筆圖標,鉛筆小圖標

    鉛筆圖標,鉛筆小圖標 相關圖片ai里面出現鉛筆的圖標焰火制作超級漂亮的鉛筆效果:本教程最初是一個在線PS教程。我試著用FW來達到這個效果。操作步驟如下:圖標是一只鉛筆的軟件...

  • 拼多多省錢的優惠券在哪里領,拼多多平臺優惠在哪里領

    拼多多省錢的優惠券在哪里領,拼多多平臺優惠在哪里領 相關圖片淘寶怎么把人踢出去品多多是一款更實惠的移動部隊網上購物軟件。如果你覺得在多都商城團購不劃算,你還是可以通過各種方式獲得優惠券!如何獲得優惠券?如何獲得優惠券拼多多...

熱評文章

  • 幸運奪寶,奪寶幸運值

    幸運奪寶,奪寶幸運值 相關圖片王者奪寶幸運值滿幸運戰利品是一個非常好的購物軟件。在這個軟件中,用戶可以使用積分來交換產品,這些積分可以通過邀請朋友來獲得。邀請朋友的步驟是什么?接下來,超人軟件...

  • 數據是結論的,大數據結論

    數據是結論的,大數據結論 相關圖片數據統計報告從數據中看到用戶的行為是一件非常有趣的事情。在了解用戶行為之后,我們可以相應的優化我們的產品設計和特殊設計,然后制作出轉換率更高的作品讓我們與您分享我...

  • 春嬌救志明百度,春嬌救志明國語

    春嬌救志明百度,春嬌救志明國語 相關圖片春嬌救志明免費觀看我不知道有多少人會對志明和春嬌的愛情感到高興和悲傷?《志明與春嬌救志明》第三部終于上映。這部電影主要講述春嬌和志明重逢后的第五年。平靜的生活又回...

  • 美拍,美拍怎么用

    美拍,美拍怎么用 相關圖片美拍使用方法近日,美派不僅推出了M計劃,還推出了邊看邊買的功能。我想很多女孩都有這種經歷。當他們看到有人穿著一件非常漂亮的衣服時,他們想給自己買一件類似的款式。這是...

  • 做一個有溫度的,做個有溫度的人

    做一個有溫度的,做個有溫度的人 相關圖片做有溫度的服務在移動互聯網時代,H5不僅僅是一個展示工具H5 游戲=互動H5 圖片=手機海報H5 動畫 音樂=微電影從早期的單屏滾動到后期的立體互動,H5 時代已經來臨,幾乎做一個有溫度...

  • C空間,C200L空間

    C空間,C200L空間 相關圖片螞蟻C空間一般來說,安裝軟件或緩存文件默認存儲在C盤,但C盤的空間越小,計算機的整體運行速度就越慢。C磁盤空間越來越少,那我們現在該怎么辦呢?首先,我們需要了解在安裝...

  • 安全帽圖標,適合在安全帽的圖標

    安全帽圖標,適合在安全帽的圖標 相關圖片安全帽標識圖片焰火教程碳風格圖標安全帽d標志...

  • word表格跨頁斷開空白,word表格總是跨頁斷開

    word表格跨頁斷開空白,word表格總是跨頁斷開 相關圖片wps中表格跨頁斷開在word編輯過程中,有時需要插入一個表。當表格太長,在word中形成一個跨頁時,表格會在第二頁斷開連接,斷開連接后會出現大量空白,這對體驗影響很大。所以,這...

  • pdf文檔怎么轉換成ppt,pdf怎么轉成ppt格式的文件

    pdf文檔怎么轉換成ppt,pdf怎么轉成ppt格式的文件 相關圖片ppt能轉成pdf嗎此前,超人引入了FDF文件到word文件的轉換。我不知道你是否記得。但當遇到無法編輯的PDF文件時,將其轉換為word并不是第一次。他們需要在工作或學習中將它們pdf轉ppt后不...

  • 在dreamweavercs6中,dreamweavercs6安裝

    在dreamweavercs6中,dreamweavercs6安裝 相關圖片dreamweaver用法:檢查當前系統32或64是否會提取文件amtlib.dll,如果發生意外,請先更改原始文件名。如果您有任何問題,可以恢復將相應的系統文件復制到Adobe Dcs6...

關注微信

变脸官网查询