Standing on the shoulders of CSS giants

@benmacgowan standing on the shoulders of css giants

Lead ui engineer @ creative jar

@benmacgowan make things with front-end tech

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

@benmacgowan ICONS from The Noun Project documentation

@benmacgowan ICONS from The Noun Project The web has Evolved

@benmacgowan HTML

@benmacgowan css

@benmacgowan css3

@benmacgowan -VENDOR-css3

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

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

@benmacgowan 10k+ lines

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

@benmacgowan ICONS from The Noun Project documentation

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

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

@benmacgowan

@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.

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

@benmacgowan

@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/

@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/

@benmacgowan

@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/

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

@benmacgowan

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

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

@benmacgowan

@benmacgowan we don’t like surprises

@benmacgowan

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

@benmacgowan

@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.”

@benmacgowan

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

@benmacgowan

@benmacgowan Puzzle designed by Marcio Duarte from The Noun Project

@benmacgowan Stop designed by Michael Rowe from The Noun Project

@benmacgowan folder structure

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

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

optimisation

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

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

@benmacgowan

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

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

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

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

@benmacgowan

@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.”

@benmacgowan

@benmacgowan but we have learnt from the past

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

@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!

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

@benmacgowan

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

be smart with your selectors

4095 rules 31 imports

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

@benmacgowan

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

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

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

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

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

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

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

@benmacgowan

Set your own standards

@benmacgowan Paper designed by Zach VanDeHey from The Noun Project
Document it

@benmacgowan Share it

@benmacgowan

@benmacgowan Thank you

Standing on the shoulders of CSS giants

Standing on the shoulders of CSS giants

More Decks by Ben MacGowan

Other Decks in Programming

Featured

Transcript