邏輯與樣式分離

這是我從網頁前端設計的HTML、JavaScript、CSS借鑑而來的概念，適用於所有團隊開發。

定義各元件的時候，往往會有下面這種想法

我Circle circle = new Circle(centerX,centerY,radius)，順便就在下面加上 setFill(Color.RED)，setEffect(New Bloom())，setStroke(Color.rgb(12,12,13))，setStrokeWidth(20)等等，後面再有對這個circle的部分邏輯處理

這樣彷彿程式碼可讀性不錯，定義物件後緊跟著其樣式屬性設定，程式碼很簡練

但是假設我下面又打算對這個circle註冊滑鼠事件，動態改變其樣式

circle.setOnMouseEntered(e->{

   Circle src = (Circle)e.getSource();

   src.setFill(Color.BLUE);

  src.setEffect(null);

  src.setStroke(Color.rgb(225,225,224));

  src.setStrokeWidth(10);

//後面是還要觸發的別的處理

 ………………

});

似乎這樣子寫，與circle相關的程式碼都在一起，好像也挺不錯的，沒有什麼問題。

但是其實問題已經體現出來了

1.樣式設計格式不規整，除了單純的樣式設計,還雜糅了很多邏輯程式碼，看起來不直觀（這個小問題可以通過改變程式碼排版來解決，倒沒什麼。但不同的人或許把樣式程式碼傾向於放在不同的位置，因此格式統一還是要進一步溝通）。

2.其他人修改時困難重重，這裡是只有一個circle，假設用作某個模擬按鈕。好像一眼別人看起來一眼就能找到。但倘若該介面中還有十幾個不同樣式的circle，別人如何辨別哪個類中的哪個circle是介面上的是這個模擬按鈕呢？可能需要反覆溝通，或者在所有類中每一個不同的圓都定義一個不同的名字並告知其他人你的命名規則。

3.重用性太差（這個或許可以把這段程式碼放在一個方法中來解決，但這樣不也是一種邏輯與樣式分離嗎？）

但與其要在編寫程式碼時額外注意使用上訴三點後括號裡的方式，倒不如直接使用外接CSS來得簡單直接，每個人程式碼中物件的樣式在CSS檔案可以找到，修改。

在原始檔中，為cicle設定一個類名，然後以後除錯修改其樣式，可不必在一份長達幾百行的原始檔中搜索這幾行改樣式的程式碼，而是直接在對應的CSS檔案中找到這個類修改即可。