39
CSS Architecture Doing it right

CSS Architecture

  • Upload
    gabriel

  • View
    108

  • Download
    0

Embed Size (px)

DESCRIPTION

Talk about css architecture. Code smells. Best practices. Team communication.

Citation preview

Page 1: CSS Architecture

CSS ArchitectureDoing it right

Page 2: CSS Architecture

@gabrielgpoca

Page 3: CSS Architecture
Page 4: CSS Architecture
Page 5: CSS Architecture

To whom is this?

Page 6: CSS Architecture

• Doing it wrong.

• Doing it right.

• Communication.

Page 7: CSS Architecture

Doing it wrong

Page 8: CSS Architecture

Code Smells

• Undoing styles.

• Magic numbers.

• Qualified selectors.

• IDs.

• !important.

Page 9: CSS Architecture

Object Oriented CSSUnderstanding HTML

Page 10: CSS Architecture

• Content

• Padding

• Border

• Margin

Page 11: CSS Architecture

• Knows only about its inside.

• Looks the same wherever it is put.

Page 12: CSS Architecture

.form-inputs {

. . .

}

!

.form-actions {

.button {

text-align: right;

margin-left: 1rem;

}

}

Page 13: CSS Architecture

.form-inputs {

. . .

}

!

.form-actions {

margin-top: 1rem;

.button {

text-align: right;

margin-left: 1rem;

}

}

Page 14: CSS Architecture

.form-actions {

.button {

text-align: right;

margin-left: 1rem;

}

}

!

.default-form .form-actions {

margin-top: 1rem;

}

!

.vertical-form .form-actions {

margin-top: 0.5rem;

}

Page 15: CSS Architecture

Doing it right

Page 16: CSS Architecture

Things change

Page 17: CSS Architecture

• Atomic Design.

• OOCSS.

• SMACS.

Page 18: CSS Architecture

The GB way

Page 19: CSS Architecture

No Frameworks

Page 20: CSS Architecture

• Subscribe to other developers structure/naming/style.

• Potential to bloat/unneeded stuff.

• Ability to scale.

• Framework conventions.

Page 21: CSS Architecture

Tools

Page 22: CSS Architecture

Folder Structure

Page 23: CSS Architecture
Page 24: CSS Architecture

• Variables.

• Typography.

• Utilities.

• Objects.

Page 25: CSS Architecture

Objects

• Buttons.

• Forms.

• Icons.

• Layouts.

• Lists.

• Containers.

Page 26: CSS Architecture
Page 27: CSS Architecture
Page 28: CSS Architecture
Page 29: CSS Architecture
Page 30: CSS Architecture

Communication

Page 31: CSS Architecture

How is design communicated to you?

Page 32: CSS Architecture

• Colours.

• Sizes.

• Spacing.

• Meanings.

• Relations.

Page 33: CSS Architecture

Design to Dev

Page 34: CSS Architecture

• Object image + excel with meta info.

• Pseudo CSS.

Page 35: CSS Architecture

Dev to Dev / Design

Page 36: CSS Architecture
Page 37: CSS Architecture

Disadvantages?

Page 38: CSS Architecture

Summary

• Take the time to learn.

• Improve.

Page 39: CSS Architecture

@gabrielgpoca