搜尋
首頁web前端css教學CSS框架的利與弊

CSS框架的利與弊

Dec 14, 2016 pm 03:38 PM

前端時間寫了一篇《利用CSS框架進行高效率的網站開發》,有不少朋友問我相關的問題。很早5key就在公司進行CSS框架的架構,也對不少朋友提出CSS框架的建議。效果是很明顯的。當然,CSS框架有利也有弊,最近也看了一些相關的文章。一些感想,與大家分享。

  CSS框架之利:

  1、開發效率的提升。 
  如果你是一個企業建站的前端開發,相信在大部分時間裡進行著同類站點的程式碼工作。定義好的框架可以大大提高你的工作效率,避免一些常見的錯誤。如果你的工作是按件計費的,你的報酬一定會比別人多。

  2、規範代碼命名。 
  在多個站點中你可能會用到一些相同的CLASS或ID。如果你有一套完善的css框架,很快你就能對你的每個網站的程式碼進行通讀。不用浪費時間在程式碼的閱讀上。

  3、更好的團隊合作 
  有些公司會將一些稍大的站點的前端代碼分成若干子項目。有過這類經驗的朋友應該對這種開發方式深感鬱悶,要注意公用css,還有註意彼此之間的程式碼配合。久而久之,廢棄代碼越來越多,彼此之間也難以閱讀。如果建立好合適的CSS框架,大家可以減少很多不必要的錯誤,提升產品品質和工作效率。

  4、解決瀏覽器的相容性問題 
  現在大部分專案都要求相容IE6,7和FF。每個站點可能都會花上一部分時間去處理相容問題。在框架層面上就將這個問題處理好。就可以為後面的兼容問題節省下大部分時間。

  5、一套完整的、結構清晰的結構代碼。 
  CSS架構為你的專案提供一個乾淨、嚴謹的基礎架構。透過它你可以快速的為你的網站搭建基礎的html程式碼框架。萬事起頭難,前面的基礎工作做好了。後面的開發速度會提高很多。

  CSS框架為你的專案提供一個乾淨、嚴謹的基礎架構。透過它你可以快速的為你的網站搭建基礎的html程式碼框架。萬事起頭難,前面的基礎工作做好了。後面的開發速度會提高很多。

  CSS框架之弊:

  1、你需要完全的理解整套框架 
  每一個加入專案的人,都需要花一定的時間去完全的理解整套框架及編碼規範;

〜〜〜〜」。框架中的錯誤bug 

  沒人可以保證自己制定的框架是完美而沒有bug的。你可能需要時間去清理框架中的bug;

  3、限制開發思路 

  框架給出大家基本的架構及開發的思路,這可能會限制你對產品開發的新思路;

 4、臃腫的臃腫的思路;原始碼 

  框架中可能有很大一部分程式碼不會常用到,而且還會降低執行效率;

  5、框架的語義化 
  我們已經注意到了HTML程式碼的語義化。但基於框架的每個站點都是獨立且唯一的,我們很難保證CSS框架的語意化。

 更多相關文章請追蹤PHP中文網(www.php.cn)! 


陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
CSS Flexbox與網格:全面評論CSS Flexbox與網格:全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求:1)Flexbox適用於一維佈局,如導航欄;2)Grid適合二維佈局,如雜誌式佈局。兩者在項目中可結合使用,提升佈局效果。

如何包括CSS文件:方法和最佳實踐如何包括CSS文件:方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件,如。 2.對於小型調整,可以使用內聯CSS,但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less,通過@import導入其他CSS文件。 4.為了性能,應合併CSS文件並使用CDN,同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid:我應該學習兩者嗎?Flexbox vs Grid:我應該學習兩者嗎?May 10, 2025 am 12:01 AM

是的,youshouldlearnbothflexboxandgrid.1)flexboxisidealforone-demensional,flexiblelayoutslikenavigationmenus.2)gridexcelstcelsintwo-dimensional,confffferDesignssignssuchasmagagazineLayouts.3)blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學(或我如何優化CSS KeyFrames動畫)軌道力學(或我如何優化CSS KeyFrames動畫)May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的?約翰·瑞亞(John Rhea)挑選了他寫的一個舊的CSS動畫,並介紹了優化它的思維過程。

CSS動畫:很難創建它們嗎?CSS動畫:很難創建它們嗎?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS:最常用的技巧@KeyFrames CSS:最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcsssanimations.keytricksinclude:1)definingsmoothtransitionsbetnestates,2)使用AnimatingMultatingMultationMultationProperPertiessimultane,3)使用使用4)使用BombingeNtibalibility,4)使用CombanningWiThjavoFofofofoftofofo

CSS計數器:自動編號的綜合指南CSS計數器:自動編號的綜合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1)他們可以使用forterablesofcontents,ListItems,and customnumbering.2)AdvancedsincludenestednumberingSystems.3)挑戰挑戰InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4)創造性

使用捲軸驅動動畫的現代滾動陰影使用捲軸驅動動畫的現代滾動陰影May 07, 2025 am 10:34 AM

使用滾動陰影,尤其是對於移動設備,是克里斯以前涵蓋的一個微妙的UX。傑夫(Geoff)涵蓋了一種使用動畫限制屬性的新方法。這是另一種方式。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具