防止程式猿和前端狗打架的幾條約定

2021-07-30 19:39:01 字數 1400 閱讀 9060

乙個專案或者產品的出生,往往包含需求、開發、測試再到生產,不是前端乙個人在戰鬥,而是乙個團隊,少則3-4人,多則十幾人,那麼問題來了,開發人員需要遵守哪些約定,才能不讓程式猿和前端狗不打起來呢?

那麼前端人員在專案合作過程中應遵守的最基礎的規範是什麼?

與程式猿約定的事 (事兒雖不多,但是效果立竿見影,好處多多~):

.min.css、.min.js 都是外部引進檔案,都是封裝好的,牽一發動全身,為免意外,還是不要去動的好哦~

有些開發人員為圖省事直接在div裡寫樣式,如:

或者寫在head 標頭檔案裡:

這種寫法都是不可取的,應該盡量避免。

這樣一來維護不方便,頁面混亂,降低可讀性,還會拖累載入速度。

樣式應該統一在css樣式表裡維護,還有乙個問題是開發人員隨意更改可能還會引起樣式衝突,命名不正確也會造成衝突,如果真的要改,需要把更改的樣式內容告知相關的前端。

所以改樣式的活還是交給前端妹子吧,以免造成傷害 /攤手/攤手~

雖然js放在head裡面也一樣不影響效果(也許是的),看控制台timeline後就會發現對載入速度影響很大哦!

建議css檔案放在頁面頂部,js檔案放在底部,也就是說載入完html後再請求載入js檔案!

乙個產品乙個風格,而配色不一的話這個產品就相當沒有水準了, 有些開發人員並沒有意識去取色,很多時候隨便設定乙個相近的顏色,於是專案中不同模組同樣一組標題就會出現有些淺藍,有些深藍,有些藏藍。。。

遇到取色障礙時候,用ps吧,更方便的一種方法 f12,谷歌裡是可以直接取色的,如果設計沒提供就問問前端吧~

用精靈明顯比乙個乙個引進效率高多了,遇到小小圖示比較密集的時候一定要用精靈哦!

有看到過不同的目錄下存在同乙個樣式檔案的,引用的時候 也是很混亂的用不同的引用位址,造成冗餘原因 肯定是這是個轉手多次的專案或者是開發人員在整合的時候沒有注意,以致重複的將檔案加入到專案裡面,給後期維護造成困難。 所以熟悉專案結構很有必要!

谷歌審計 audits,檢視頁面冗餘檔案 (標頭檔案引用但是沒有引用到的css/js檔案)

多個容器巢狀的時候,如果需要固定寬度,值寫最外層容器的寬度,裡面的用百分比。如:

左右排版的頁面,右邊內容是另外鏈結的頁面,只需將框架固定值如800px;裡面也需要800px的話,width:100%;

告知需要適配的裝置,pc還是手機?告知使用者主要用的pc的解析度,以便做相容。

前端狗要注意的事:

程式猿到產品狗的迅速轉換

從猿到狗的進化,已經慢慢脫離了人類了。給大家說說我為什麼轉產品吧,其實可能和很多人想法不同,和之前的程式設計師交流,有一部分人會認為產品是乙個很好的職位。為啥這麼說呢,產品一般是對所在的專案對各個方面了解最全面的乙個人,會認為如果選擇乙個專案經理的話會在產品中擔任。在我所在的圈子裡面問他們為啥去做程...

男程式猿和女程式猿的網戀 相見(二)

離著接近要見面的日子越來越近,我開始有一點不安 我把我網戀的事以及相見事,告訴我表哥,閨蜜們,她們聽到後都是反對的,覺得不靠譜,我試圖說服他們,他不是 其實我也是內心在說服自己。我把大家反對我和他見面事告訴他,他給我打 給我做很多思想工作,大概意思是你要相信我,我不會騙你 的。我快要去見他時候,我們...

程式猿必備的8款web前端動畫外掛程式九

採用html5和css3技術我們可以實現很多色彩變幻和情景過渡動畫效果,之前分享的這款html5 svg天氣預報動畫卡片就是乙個很不錯的例子。這次我們帶來的是一款基於html5和css3的四季更替過渡動畫特效,一副簡單的森林景象伴隨著春夏秋冬四季更替,每乙個季節都展現出各自的唯美風景,非常的不錯。之...