Let's say, u already normally human and didn't use tailwindcss for your Rails app. Well, I just want to show you how I uses a feature from ruby-3.2 introduced by @zverok. It names Data and I use it together with ViewComponent and Rux to have a little less ugly code. Gemfile: ``` group :development, :test do ... gem 'view_component', '~> 2.82' gem 'rux-rails', '~> 1.2', '>= 1.2.2' gem 'birdel', '~> 3.1' end ``` 1. Generate new component by ViewComponent or by Birdel ``` $ birdel gcom Ui::Mix::BarComponent # app/ # ├─ components/ # │ ├─ ui/ # │ │ ├─ mix/ # │ │ │ ├─ bar_component/ # │ │ │ │ ├─ bar_component.rb # │ │ │ │ ├─ bar_component.js # │ │ │ │ ├─ bar_component.css # │ │ │ │ ├─ bar_component.html.erb # │ │ │ │ ├─ bar_component_controller.js # │ │ │ │ └─ bar_component_actor.js ``` 2. remove your `bar_component.html.erb` file 3. Write your styles into `bar_component.css` 4. Rename `bar_component.rb` file to `bar_component.rux` ```ruby #app/components/ui/mix/bar_component/bar_component.rux class Ui::Mix::BarComponent::BarComponent < ViewComponent::Base Styles = Data.define( :nav_bar, :nav_item, :btn, :btn_active, :nav_item__logo ) attr_reader :styles def initialize() end def styles @styles ||= Styles.new( nav_bar: 'nav-bar', nav_item: 'nav-item', btn: 'nav-item-btn', btn_active: 'nav-item-btn--active', nav_item__logo: 'nav-item-logo' ) end def call

end def css_class @css_class ||= "ui--mix--blabla..." end end ``` **Explanation:** In this part we define a custom Data class named Styles with fields, which will be used as the names of classes from our style file: ```ruby Styles = Data.define( :nav_bar, :nav_item, :btn, :btn_active, :nav_item__logo ) ``` And here we just set a value for each field of our Styles data object: ```ruby def styles @styles ||= Styles.new( nav_bar: 'nav-bar', nav_item: 'nav-item', btn: 'nav-item-btn', btn_active: 'nav-item-btn--active', nav_item__logo: 'nav-item-logo' ) end ``` Great now we can use that `@styles` object inside `#call` method which allows us to write the same to JSX-styled syntax code. Like: ```

``` Example rendered HTML: ```html ``` Btw, Birdel (https://github.com/serhiijun/birdel) is my microframework which is not ready yet and you can help me by contributing. It's revolutionized tool for rails assets management and WebSocket components rendering which will replace sucks rails-turbo.

serhiijun

Not-so-ugly styles code in your Rails app

Join Our Newsletter. No Spam, Only the good stuff.