Standing on the shoulders of CSS giants

Slide 1

Slide 1 text

@benmacgowan standing on the shoulders of css giants

Slide 2

Slide 2 text

Lead ui engineer @ creative jar

Slide 3

Slide 3 text

@benmacgowan make things with front-end tech

Slide 4

Slide 4 text

@benmacgowan Speedometer designed by Prerak Patel from The Noun Project ENTER STATEMENT HERE breakingborde.rs

Slide 5

Slide 5 text

@benmacgowan ICONS from The Noun Project documentation

Slide 6

Slide 6 text

@benmacgowan ICONS from The Noun Project The web has Evolved

Slide 7

Slide 7 text

@benmacgowan HTML

Slide 8

Slide 8 text

@benmacgowan css

Slide 9

Slide 9 text

@benmacgowan css3

Slide 10

Slide 10 text

@benmacgowan -VENDOR-css3

Slide 11

Slide 11 text

“that’ll do donkey, that’ll do”

Slide 12

Slide 12 text

@benmacgowan Site Map designed by Sergey Bakin from The Noun Project as the web has evolved, websites have grown up larger

Slide 13

Slide 13 text

@benmacgowan 10k+ lines

Slide 14

Slide 14 text

@benmacgowan “the average web page now weighs in at about 1.3MB, up 35% in the last year” - HTTP ARCHIVE

Slide 15

Slide 15 text

@benmacgowan ICONS from The Noun Project documentation

Slide 16

Slide 16 text

@benmacgowan DEVELOPERS EITHER OR DOCUMENTATION Heart designed by Thomas Le Bas from The Noun Project

Slide 17

Slide 17 text

@benmacgowan Trophy designed by Ken Messenger from The Noun Project Set standards

Slide 18

Slide 18 text

@benmacgowan

Slide 19

Slide 19 text

@benmacgowan

Slide 20

Slide 20 text

@benmacgowan

Slide 21

Slide 21 text

@benmacgowan OOCSS http://oocss.org/ How do you scale CSS for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

Slide 22

Slide 22 text

@benmacgowan OOCSS http://oocss.org/ Separation of structure from skin separation of containers and content

Slide 23

Slide 23 text

@benmacgowan

Slide 24

Slide 24 text

@benmacgowan BEM BEM stands for Block, Element, Modifier. It's a way of describing reality in code, a range of patterns, and a way of thinking about program entities regardless of programming languages being used. http://bem.info/method/

Slide 25

Slide 25 text

@benmacgowan BEM Categorising blocks of elements of which the site consists avoids cascading selectors and inheritence decreases contextual dependency on other code http://bem.info/method/

Slide 26

Slide 26 text

@benmacgowan

Slide 27

Slide 27 text

@benmacgowan SMACSS SMACSS is more style guide than rigid framework. There is no library within here for you to download or install. It is an attempt to document a consistent approach to site development when using CSS. http://smacss.com/

Slide 28

Slide 28 text

@benmacgowan SMACSS Categorising CSS rules and creating patterns Increases the semantic value of a section Decreases the expectation of specific HTML http://smacss.com/

Slide 29

Slide 29 text

@benmacgowan

Slide 30

Slide 30 text

@benmacgowan Star designed by Dmitry Baranovskiy from The Noun Project my personal favourite, CSS

Slide 31

Slide 31 text

@benmacgowan the number 1 goal of css is to separate visual aesthetics from content.

Slide 32

Slide 32 text

@benmacgowan

Slide 33

Slide 33 text

@benmacgowan

Slide 34

Slide 34 text

@benmacgowan

Slide 35

Slide 35 text

@benmacgowan

Slide 36

Slide 36 text

@benmacgowan

Slide 37

Slide 37 text

@benmacgowan we don’t like surprises

Slide 38

Slide 38 text

@benmacgowan

Slide 39

Slide 39 text

@benmacgowan “A block is an independent entity, a "building block" of an application. A block can be either simple or compound (containing other blocks).”

Slide 40

Slide 40 text

@benmacgowan

Slide 41

Slide 41 text

@benmacgowan “An element is a part of a block that performs a certain function. Elements are context- dependent: they only make sense in the context of the block they belong to.”

Slide 42

Slide 42 text

@benmacgowan

Slide 43

Slide 43 text

@benmacgowan “A modifier is a property of a block or an element that alters its look or behavior.”

Slide 44

Slide 44 text

@benmacgowan

Slide 45

Slide 45 text

@benmacgowan Puzzle designed by Marcio Duarte from The Noun Project

Slide 46

Slide 46 text

@benmacgowan Stop designed by Michael Rowe from The Noun Project

Slide 47

Slide 47 text

@benmacgowan folder structure

Slide 48

Slide 48 text

@benmacgowan Tag designed by Cor Tiemens from The Noun Project logical categorisation

Slide 49

Slide 49 text

@benmacgowan Glasses designed by Travis Yunis from The Noun Project readability

Slide 50

Slide 50 text

@benmacgowan Speedometer designed by Prerak Patel from The Noun Project optimisation

Slide 51

Slide 51 text

@benmacgowan Paper designed by Zach VanDeHey from The Noun Project default.css

Slide 52

Slide 52 text

@benmacgowan foundations.css components.css regions.css themes.css Paper designed by Zach VanDeHey from The Noun Project

Slide 53

Slide 53 text

@benmacgowan

Slide 54

Slide 54 text

@benmacgowan default.Scss _foundations.Scss _components.scss _regions.scss _themes.scss Paper designed by Zach VanDeHey from The Noun Project

Slide 55

Slide 55 text

@benmacgowan default.css Paper designed by Zach VanDeHey from The Noun Project

Slide 56

Slide 56 text

@benmacgowan Judge Dredd designed by Matt Harmon from The Noun Project naming convention

Slide 57

Slide 57 text

@benmacgowan Writing designed by Korokoro from The Noun Project writing practice

Slide 58

Slide 58 text

@benmacgowan

Slide 59

Slide 59 text

@benmacgowan

Slide 60

Slide 60 text

@benmacgowan “When labelling elements within a component with a class, try to avoid generic classes like .inner, .hd, .bd. Instead, prefix the class name with the name of the component. This is to avoid CSS getting overwritten when classes are too generic.”

Slide 61

Slide 61 text

@benmacgowan

Slide 62

Slide 62 text

@benmacgowan but we have learnt from the past

Slide 63

Slide 63 text

@benmacgowan “HTML class names offer no semantic value to search engines or screen readers, aside from microformats.”

Slide 64

Slide 64 text

@benmacgowan if your class is called “blue” and you want to change it to red, you have far bigger problems than class names to deal with!

Slide 65

Slide 65 text

@benmacgowan Glasses designed by Travis Yunis from The Noun Project readability

Slide 66

Slide 66 text

@benmacgowan

Slide 67

Slide 67 text

@benmacgowan

Slide 68

Slide 68 text

@benmacgowan Repeat designed by Jardson AraUjo from The Noun Project be consistent

Slide 69

Slide 69 text

@benmacgowan Speedometer designed by Prerak Patel from The Noun Project be smart with your selectors

Slide 70

Slide 70 text

@benmacgowan Speedometer designed by Prerak Patel from The Noun Project 4095 rules 31 imports

Slide 71

Slide 71 text

@benmacgowan Crown designed by Olivier Guin from The Noun Project don’t let specificity rule

Slide 72

Slide 72 text

@benmacgowan

Slide 73

Slide 73 text

@benmacgowan

Slide 74

Slide 74 text

@benmacgowan “only ever use class names” - a lot of people, everywhere

Slide 75

Slide 75 text

@benmacgowan Pillar designed by Cengiz SARI from The Noun Project Foundations of css

Slide 76

Slide 76 text

@benmacgowan #id Heart designed by Thomas Le Bas from The Noun Project

Slide 77

Slide 77 text

@benmacgowan Speedometer designed by Prerak Patel from The Noun Project

Slide 78

Slide 78 text

@benmacgowan 1. PHilosophy 2. categorisation 3. file/folder structure 4. naming convention ...

Slide 79

Slide 79 text

@benmacgowan Man designed by Justin Alexander from The Noun Project writing for machines writing for humans

Slide 80

Slide 80 text

@benmacgowan Cleaning Supplies designed by NATAPON CHANTABUTR from The Noun Project Don’t clutter your html

Slide 81

Slide 81 text

@benmacgowan Man designed by Sergi Delgado from The Noun Project We are not clones

Slide 82

Slide 82 text

@benmacgowan

Slide 83

Slide 83 text

@benmacgowan Speedometer designed by Prerak Patel from The Noun Project Set your own standards