【PrimeFaces】PrimeFaces元件 CSS客製化 - Part1：基礎知識

tags: PrimeFaces

Include

• 不建議直接將css code寫在main.css
• 使用的 css file 必須先 include 於
  1. main.css, @import url(example.css);
  2. liferay-portlet.xml, <header-portlet-css>/css/example.css</header-portlet-css>
  3. View 的 head (不建議),
     <link rel="stylesheet" type="text/css" href="/portlet專案名稱/css/example.css"/>
  • 不建議的原因：寫liferay的專案，當然要用liferay設定css的方式
• 當方法1沒有套用到css的時候，建議使用方法2

CSS Selector 選擇器

1. !important：更高的優先權
2. 優先度：style(!important)>ID>Class>元素(Elements)
   
3. 當優先度相同時，取最後一筆，即最後載入者
4. 延伸閱讀：
   https://www.minwt.com/webdesign-dev/css/17118.html
   https://www.w3schools.com/cssref/css_selectors.asp

Common 基礎知識

• 如何找出Primefaces寫好的class
  方法1：F12，於css class列表中，當優先度相同時，越上方的class，優先度越高
  方法2：查詢Primeaces 5.3 的官方文件
• 自定義：1. .class 2. #id 3. 階層、selector
• 自定義class的寫法
  A. 直接override 原class --> 不建議
  B. 自定義class去override，若與A.同階級，取最後一筆
  C. 寫在元件的style，若與A.B.同階級，C.優先度最高 --> 不建議
  • A.不建議的原因：css影響範圍是所有用到該class的元件，e.g.override ui-button這個class，影響範圍就會是所有button
  • C.不建議的原因：寫在元件的style，而不寫在styleClass，會造成後續人員維護的困難度

Reference 參考資料

1. CSS Selector Priority：https://www.minwt.com/webdesign-dev/css/17118.html

Part2：Button / CommandButton

連結：【PrimeFaces】PrimeFaces元件 CSS客製化 - Part2：Button / CommandButton