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