Overview
Styling components is a bit different than styling entire pages of CSS. Generally speaking, you want the styling rules to be co-located with the component. That means you can either see the CSS inside of the component or are using utility classes, like Tailwind or DaisyUI, to define the look and feel of each component.
Ideally you avoid situations where changing a global stylesheet could break the look and feel of your component.
Vanilla CSS
Plain ol’ CSS can be used to style components, and the stylesheets can be kept inline with the component.
🔓 Unlock content
Pre-order this course to unlock this video, source code, and content. You'll also get to work with Brad to fine tune the course cirriculum.
class MyCard < ▓▓▓▓▓▓▓▓▓::▓▓▓▓
def ▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓(class: "my-card") {
▓▓▓(class: "my-card__title") { "Hi" }
▓▓▓(class: "my-card__content") { "This is the body of a card" }
}
end
def ▓▓▓▓▓ = <<~▓▓▓
.my-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 1rem;
}
.my-card__title {
font-weight: bold;
margin-bottom: 0.5rem;
}
.my-card__content {
color: #666;
}
▓▓▓
end
▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓▓▓▓
Utility classes
▓▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓ ▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓▓
class MyCard < ▓▓▓▓▓▓▓▓▓::▓▓▓▓
def ▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓(class: "rounded-lg border p-4") {
▓▓▓(class: "font-bold mb-2") { "Hi" }
▓▓▓(class: "text-gray-600") { "This is the body of a card" }
}
end
end
▓▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓
class MyCard < ▓▓▓▓▓▓▓▓▓::▓▓▓▓
def ▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓(class: "card w-96 shadow-xl") {
▓▓▓(class: "card-title") { "Hi" }
▓▓▓(class: "card-body") { "This is the body of a card" }
}
end
end
Which framework is right for you?
▓▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓ ▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓ ▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓
▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓