### Clojure: Example of direct child CSS selector

Source: https://github.com/cljfx/css/blob/master/README.md

This Clojure code snippet demonstrates how to use direct child selectors in CSS within a style map. It shows a straightforward way to apply styles to direct children of an element, including pseudo-classes.

```clojure
{'.style-class' {-fx-background-color :red
                 '> .direct-child' {-fx-text-fill :green
                                    ':pseudo-class' {-fx-text-fill :blue}}}}
```

--------------------------------

### Clojure: Example of GOOD CSS priority rules

Source: https://github.com/cljfx/css/blob/master/README.md

This Clojure code snippet illustrates a recommended approach for styling components by avoiding CSS priority rules and promoting the use of different CSS classes for different purposes. It shows a style map and a component definition where variants are handled by appending to a base style class, leading to more manageable CSS.

```clojure
;; GOOD!

;; style map:
{:.notification {-fx-background-color :black
                  "-label" {"-info" {-fx-text-fill :gray}
                            "-danger" {-fx-text-fill :red}}}}

;; component:
(defn notification [{:keys [text variant]
                     :or {variant "info"}}]
  {:fx/type :v-box
   :style-class "notification"
   :children [{:fx/type :label
               :style-class (str "notification-label-" variant)
               :text text}]})
```

--------------------------------

### Clojure: Example of indirect child CSS selector (discouraged)

Source: https://github.com/cljfx/css/blob/master/README.md

This Clojure code snippet illustrates the use of indirect child selectors in CSS within a style map. It highlights that this approach can lead to less readable CSS (e.g., a string starting with a space) and is generally discouraged due to potential performance implications in JavaFX.

```clojure
{'.style-class' {-fx-background-color :red 
                 " .indirect-child" {-fx-text-fill :green}}}
```

--------------------------------

### Clojure: Example of BAD CSS priority rules

Source: https://github.com/cljfx/css/blob/master/README.md

This Clojure code snippet demonstrates a less effective way of styling components by relying on CSS priority rules. It shows a style map and a component definition where different variants are handled by distinct style classes, which can lead to CSS files becoming append-only.

```clojure
;; BAD!

;; style map:
{:.notification {-fx-background-color :black
                  "> .label" {-fx-text-fill :gray}}
 ".danger > .label" {-fx-text-fill :red}}

;; component:
(defn notification [{:keys [text variant]
                     :or {variant "info"}}]
  {:fx/type :v-box
   :style-class ["notification" variant]
   :children [{:fx/type :label 
               :text text}]})
```

--------------------------------

### Register and Define Styles with cljfx.css

Source: https://github.com/cljfx/css/blob/master/README.md

This snippet demonstrates how to define and register a style map using `cljfx.css`. It shows how to use keyword keys for accessing style values directly in code and string keys for defining CSS selectors and rules. The `css/register` function makes the style map globally accessible via a generated URL.

```clojure
(ns my-app.style
  (:require [cljfx.css :as css]))

(def style
  (css/register ::style
    (let [padding 10
          text-color "#111111"]

      ;; you can put style settings that you need to access from code at keyword keys in a
      ;; style map and access them directly in an app

      {::padding padding
       ::text-color text-color

       ;; string key ".root" defines `.root` selector with these rules: `-fx-padding: 10;`

       ".root" {:-fx-padding padding}
       ".label" {:-fx-text-fill text-color
                 :-fx-wrap-text true}
       ".button" {:-fx-text-fill text-color
                  ;; vector values are space-separated
                  :-fx-padding ["4px" "8px"]
                  ;; nested string key defines new selector: `.button:hover`
                  ":hover" {:-fx-text-fill :black}}})))


;; `css/register` registers this style map globally so it can be loaded by URL, and puts
;; URL string in a style map at `:cljfx.css/url` key.

style
=> {:my-app.style/padding 10,
    :my-app.style/text-color "#111111",
    ".root" {:-fx-padding 10},
    ".label" {:-fx-text-fill "#111111", :-fx-wrap-text true},
    ".button" {:-fx-text-fill "#111111",
               :-fx-padding ["4px" "8px"],
               ":hover" {:-fx-text-fill :black}},

    ;; URL has stringified version of keyword in query part of URL, and a hash of a style 
    ;; map in a fragment part. Query part is used to lookup style map in a global 
    ;; registry, and fragment is used to indicate that style is changed when it's 
    ;; redefined to trigger CSS reload in JavaFX

    :cljfx.css/url "cljfxcss:?my-app.style/style#-1561130535"}


;; let's see how loaded CSS looks like:

(println (slurp (::css/url style)))

;; prints:
;; .root {
;;   -fx-padding: 10;
;; }
;; .label {
;;   -fx-text-fill: #111111;
;;   -fx-wrap-text: true;
;; }
;; .button {
;;   -fx-text-fill: #111111;
;;   -fx-padding: 4px 8px;
;; }
;; .button:hover {
;;   -fx-text-fill: black;
;; }


;; Later, in app description:

{:fx/type :stage
 :showing true 
 :scene {:fx/type :scene
         :stylesheets [(::css/url style)]
         :root ...}}
```

--------------------------------

### Implement Live Style Reloading in cljfx Development

Source: https://context7.com/cljfx/css/llms.txt

Enables instant style updates during development by storing styles in application state and watching the style var for changes. When the style var is redefined, a watch triggers a state update, causing cljfx to re-render with the new styles. This significantly speeds up the CSS development cycle.

```clojure
(ns my-app.dev
  (:require [cljfx.api :as fx]
            [cljfx.css :as css]))

;; Define the style (can be redefined during development)
(def style
  (css/register ::style
    {".root" {:-fx-background-color "#eee"}
     ".label" {:-fx-text-fill "#333"
               :-fx-font-size 14}}))

;; Application state includes the style
(def *state
  (atom {:style style
         :counter 0}))

;; View function
(defn app-view [{:keys [style counter]}]
  {:fx/type :stage
   :showing true
   :scene {:fx/type :scene
           :stylesheets [(::css/url style)]
           :root {:fx/type :v-box
                  :style-class "root"
                  :children [{:fx/type :label
                              :style-class "label"
                              :text (str "Counter: " counter)}]}}})

;; Create and mount renderer
(def renderer
  (fx/create-renderer
    :middleware (fx/wrap-map-desc app-view)))

(fx/mount-renderer *state renderer)

;; Enable live reloading during development (evaluate in REPL)
(comment
  ;; Add watch to update styles on var change
  (add-watch #'style :refresh-app
    (fn [_ _ _ new-style] 
      (swap! *state assoc :style new-style)))

  ;; Now re-evaluate the style def to see changes instantly!
  ;; For example, change :-fx-background-color to "#fff"

  ;; Remove watch when done iterating
  (remove-watch #'style :refresh-app))
```

--------------------------------

### Register CSS Styles with cljfx/css

Source: https://context7.com/cljfx/css/llms.txt

Globally registers a style map with a keyword identifier. It returns the map with an added `:cljfx.css/url` key containing a URL string for JavaFX to load. String keys form CSS selectors, keyword keys define CSS rules, and vector values are space-separated.

```clojure
(ns my-app.style
  (:require [cljfx.css :as css]))

(def style
  (css/register ::style
    (let [padding 10
          text-color "#111111"]
      {;; Keyword keys store values accessible from code
       ::padding padding
       ::text-color text-color

       ;; String keys define CSS selectors
       ".root" {:-fx-padding padding}
       ".label" {:-fx-text-fill text-color
                 :-fx-wrap-text true}
       ".button" {:-fx-text-fill text-color
                  ;; Vector values become space-separated
                  :-fx-padding ["4px" "8px"]
                  ;; Nested string keys create compound selectors
                  ":hover" {:-fx-text-fill :black}}})))

;; Result includes the URL for JavaFX to load
style
;; => {:my-app.style/padding 10,
;;     :my-app.style/text-color "#111111",
;;     ".root" {:-fx-padding 10},
;;     ".label" {:-fx-text-fill "#111111", :-fx-wrap-text true},
;;     ".button" {:-fx-text-fill "#111111",
;;                :-fx-padding ["4px" "8px"],
;;                ":hover" {:-fx-text-fill :black}},
;;     :cljfx.css/url "cljfxcss:?my-app.style/style#-1561130535"}

;; View generated CSS
(println (slurp (::css/url style)))
;; .root {
;;   -fx-padding: 10;
;; }
;; .label {
;;   -fx-text-fill: #111111;
;;   -fx-wrap-text: true;
;; }
;; .button {
;;   -fx-text-fill: #111111;
;;   -fx-padding: 4px 8px;
;; }
;; .button:hover {
;;   -fx-text-fill: black;
;; }
```

--------------------------------

### Apply cljfx/css Styles to JavaFX Scenes

Source: https://context7.com/cljfx/css/llms.txt

Apply registered styles to JavaFX scenes by passing the generated URL (from `:cljfx.css/url`) to the `:stylesheets` property. Components reference style classes defined in the style map using the `:style-class` property.

```clojure
(ns my-app.core
  (:require [cljfx.api :as fx]
            [cljfx.css :as css]
            [my-app.style :as style]))

;; Create the app view using the style URL
(defn app-view [{:keys [style]}]
  {:fx/type :stage
   :showing true
   :width 800
   :height 600
   :scene {:fx/type :scene
           ;; Load CSS from the registered style
           :stylesheets [(::css/url style)]
           :root {:fx/type :v-box
                  :style-class "root"
                  :children [{:fx/type :label
                              :style-class "label"
                              :text "Hello, styled world!"}
                             {:fx/type :button
                              :style-class "button"
                              :text "Click me"}]}}})

;; Mount the renderer
(def *state (atom {:style style/style}))

(def renderer
  (fx/create-renderer
    :middleware (fx/wrap-map-desc app-view)))

(fx/mount-renderer *state renderer)
```

--------------------------------

### Define Complex Styles with Nested Selectors in cljfx

Source: https://context7.com/cljfx/css/llms.txt

Demonstrates how to build sophisticated style hierarchies using nested maps in cljfx. It covers direct child selectors (>), pseudo-classes, component-specific styles, and helper functions for style reuse and computed values. This approach allows for organized and maintainable CSS definitions within your Clojure application.

```clojure
(ns my-app.complex-style
  (:require [cljfx.css :as css]))

(def style
  (css/register ::style
    (let [;; Reusable style values
          base-color "#222"
          control-color "#fff"
          hover-color "#f4f4f4"
          spacing 10
          corner-size 5

          ;; Helper function for text styles
          text (fn [size weight]
                 {:-fx-text-fill base-color
                  :-fx-wrap-text true
                  :-fx-font-weight weight
                  :-fx-font-size size})

          ;; Shadow effects
          control-shadow (format "dropshadow(gaussian, %s3, 5, 0, 0, 1)" base-color)
          hover-shadow (format "dropshadow(gaussian, %s3, 7, 0, 0, 2)" base-color)

          ;; Reusable border style
          border {:-fx-border-color (str base-color "4")
                  :-fx-background-color control-color
                  :-fx-border-radius corner-size
                  :-fx-background-radius corner-size}]

      {;; Expose values for use in code
       ::spacing spacing
       ::corner-size corner-size

       ;; App-prefixed styles for namespacing
       ".app" {"-label" (text 13 :normal)
               "-header" (text 20 :bold)
               "-sub-header" (text 16 :bold)
               "-container" {:-fx-spacing spacing}
               "-root" {:-fx-padding 20
                        :-fx-background-color "#eee"}

               ;; Button variants
               "-button" {"-primary" (merge (text 13 :normal)
                                            border
                                            {:-fx-padding "4px 8px"
                                             :-fx-effect control-shadow
                                             ":hover" {:-fx-effect hover-shadow
                                                       :-fx-background-color hover-color}
                                             ":armed" {:-fx-effect control-shadow}})
                          "-secondary" (merge (text 13 :normal)
                                              border
                                              {:-fx-padding "4px 8px"})}}

       ;; Scroll bar styling with nested child selectors
       ".scroll-bar" {:-fx-background-color :transparent
                      "> .thumb" {:-fx-background-color (str base-color "8")
                                  :-fx-background-radius 9
                                  ":pressed" {:-fx-background-color base-color}}
                      "> .increment-button" {:-fx-padding 0}
                      "> .decrement-button" {:-fx-padding 0}}})))

;; Generated CSS includes compound selectors:
;; .app-label { -fx-text-fill: #222; ... }
;; .app-header { -fx-text-fill: #222; -fx-font-size: 20; ... }
;; .app-button-primary { ... }
;; .app-button-primary:hover { ... }
;; .scroll-bar > .thumb { ... }
;; .scroll-bar > .thumb:pressed { ... }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.