iT邦幫忙

0

不同開發者CSS衝突問題

故事是這樣的...

有兩個開發者A和B分別開發同一個網頁畫面的兩個不同功能
AB都開發好後準備放在同一個網頁上~

功能其實都正常..
可是卻發生CSS的衝突(還不少..)

想請問..在不修改彼此的CSS情況下..
如何擺在一起~
且..兩個功能畫面與原設計一樣..

目前我將功能導入的方法有兩種(以下舉例)
一種是<?php include('A.php');
一種是<script> $("#div1").load(B.php); </script>

我有想到過去會使用iframe將別人網頁畫面嵌進自己網頁的方法..
但..現在的設計有宣導盡量不要用iframe..= =
so..還有其他方式嗎?= =

補充:或類似於iframe的作法.

補充:這麼說吧!!A網頁使用了Bootstrap4;B網頁使用了UIkit.min.css!!

看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2017-12-04 09:35:33 檢舉
應該是沒有...請他們調整一下吧XD

方法一:請他們各自取一個前綴名字,然後將所有的class改名
方法二:在各自的html最外層的元素(例如div)加上自訂的前綴class名稱,然後修改css,在規則前都加上這個class

我不熟css,看看還有沒有高人來指點...
用git不就什麼問題都沒了
回fillano大大..這加前綴的其實他們有做...但衝突的是標籤的部分..例如:h1、h2、h6、.....等等

回混水摸魚大大..git有在使用..但大家好像只當它作為存檔的功能一樣..完全沒發揮它的效用..觀念問題..再者..因為是分別的不同功能..所以照理說彼此都不影響功能..也確實沒造成影響..但卻影響到CSS
基本上應該要先CSSRESET 之後
某些標籤要限制給系統用,不能開放,這個要事先說好
尤其是有要做 SEO 的時候,這個規矩必須強制規範
網頁物件要有統一的命名原則,透過命名之後再去下CSS
這樣就會把 CSS 衝突降到最低,還有不用 IFRAME 可以用 DIV 去包
不同人開發的區段,用DIV 區隔,下面的物件就可以用 DIV 的名稱去分別下CSS
舉例
<style>
//for module1
#module1.xxx{}
#module1.yyy{}
</style>
<div id=module1>
......
</div>
<style>
//for module2
#module2.xxx{}
#module2.yyy{}
</style>
<div id=module2>
......
</div>
謝謝窮嘶發發發大大精闢的解答..
不過我有幾個問題~
1.新名詞..CSSRESET是甚麼?怎麼玩?有參考資料或網址嗎?
2."網頁物件要有統一的命名原則,透過命名之後再去下CSS"
這句話我理解..但實作上..因為我不曾再比較有制度的公司從事過..所以這樣的規則、流程該怎麼做..不是很懂..我是屬於做中學的那種人..不知道這樣的規則或命名流程之類的..有沒有相關參考資料可以看? 或是您願意教我?>_< (公司沒有這類人才~我來成為那個人才~!!!XD)
小魚 iT邦研究生 1 級 ‧ 2017-12-04 11:59:23 檢舉
盡量用class跟div就好了, 如果是h1到h6衝突最多也才6個, 要不然就h1再加class吧...
回小魚大大..很多耶..p、ul、li、table........很多耶..= =

2 個回答

3
法蘭克
iT邦新手 5 級 ‧ 2017-12-04 14:02:09
最佳解答

目前你遇到的情境是A和B一起開發同一個網頁的不同功能(可能是不同的區塊),在這種情形下要特別注意以下幾點:

  1. 使用git版本控制,比如共同追蹤index.html,A開發完成某個區塊後commit and push, B pull下來發生衝突,此時兩個人討論衝突點並解決衝突,最後在push。
  2. 共同使用reset.css把所有的瀏覽器預設的css樣式重置(A和B溝通選擇一個reset.css)。
    http://www.flycan.com/article/css/reset-css-562.html
  3. 當A要使用Bootstrap4,B要使用UIkit.min.css,這種情形盡量避免,會增加後續維護上的困難,請A和B討論選擇一個css framework來開發,因為是共同開發所以一定要有規範,不能想用什麼framework開發就使用,否則如果有五個人一起開發不就用五種,這是很可怕的。(重點是要有規範以及取捨)
  4. 雖然文中沒有提到,但是如果有使用jQuery也勢必要相同版本。
  5. 如果以上都有注意到,還可以使用css優先權規則去制定架構,比如
<div class="moduleA container">
    <div class="banner-block">
    ...
    </div>
</div>

<div class="moduleB container">
    <div class="list-block">
    ...
    </div>
</div>

那麼A就負責寫moduleA的功能,B負責寫moduleB的功能

看來也只能請另一個改變了...

0
浩瀚星空
iT邦新手 2 級 ‧ 2017-12-06 10:22:36

一般來說,像這種屬於元件式的css。
也就是直接控制元件的。我會建議將其分離出來放到一個global.css上。
然後兩邊共用此css。

大多數而言。一般元件式宣告的css我只會做初始化的動作處理。
其它的還是會用class免得有這樣衝突的問題存在。

我要發表回答

立即登入回答