CSS Architecture
description
Transcript of CSS Architecture
CSS ArchitectureDoing it right
@gabrielgpoca
To whom is this?
• Doing it wrong.
• Doing it right.
• Communication.
Doing it wrong
Code Smells
• Undoing styles.
• Magic numbers.
• Qualified selectors.
• IDs.
• !important.
Object Oriented CSSUnderstanding HTML
• Content
• Padding
• Border
• Margin
• Knows only about its inside.
• Looks the same wherever it is put.
.form-inputs {
. . .
}
!
.form-actions {
.button {
text-align: right;
margin-left: 1rem;
}
}
.form-inputs {
. . .
}
!
.form-actions {
margin-top: 1rem;
.button {
text-align: right;
margin-left: 1rem;
}
}
.form-actions {
.button {
text-align: right;
margin-left: 1rem;
}
}
!
.default-form .form-actions {
margin-top: 1rem;
}
!
.vertical-form .form-actions {
margin-top: 0.5rem;
}
Doing it right
Things change
• Atomic Design.
• OOCSS.
• SMACS.
The GB way
No Frameworks
• Subscribe to other developers structure/naming/style.
• Potential to bloat/unneeded stuff.
• Ability to scale.
• Framework conventions.
Tools
Folder Structure
• Variables.
• Typography.
• Utilities.
• Objects.
Objects
• Buttons.
• Forms.
• Icons.
• Layouts.
• Lists.
• Containers.
Communication
How is design communicated to you?
• Colours.
• Sizes.
• Spacing.
• Meanings.
• Relations.
Design to Dev
• Object image + excel with meta info.
• Pseudo CSS.
Dev to Dev / Design
Disadvantages?
Summary
• Take the time to learn.
• Improve.
@gabrielgpoca