100+ files Wednesday, May 16, 12 This would be insanity if it was hand authored CSS, but sass let us keep it manageable while we were learning, evolving, looking for product/market fit.
How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
12 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
12 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
and high-level concepts, not style primitives. Wednesday, May 16, 12 Isn’t this simpler to understand if you’re reading the code? We read code more often than we write it. Be nice to your future self.
and high-level concepts, not style primitives. Wednesday, May 16, 12 Isn’t this simpler to understand if you’re reading the code? We read code more often than we write it. Be nice to your future self.
Presentational Concepts Concept App Styles Foundation Classes Mixin Library Wednesday, May 16, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.
Presentational Concepts Concept App Styles Foundation Classes Mixin Library Wednesday, May 16, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.
of a page. CSS3 will bring alternate layout methods. • Page layouts - Defines how primary elements adhere to the grid and respond. Blog Post Wednesday, May 16, 12
elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 16, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
elements are styled. • Vertical Rhythm • There is no default typography. Opt-in To Typography Wednesday, May 16, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 16, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 16, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
• Often linked to a background Wednesday, May 16, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
• Often linked to a background Wednesday, May 16, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
• Often linked to a background Wednesday, May 16, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
• Often linked to a background Wednesday, May 16, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
• Often linked to a background Wednesday, May 16, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
• Often linked to a background Wednesday, May 16, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
• Often linked to a background Wednesday, May 16, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
• Often linked to a background Wednesday, May 16, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
name. Unfortunately, designers are not often good at naming things. Wednesday, May 16, 12 Coders have to name everything they make, but designers don’t. Naming is a skill that must be developed. You have to learn to explain your intuition and instinct.
Change the design Wait: Don’t name it Wednesday, May 16, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
a design change just because a name doesn’t match. Intuition is a tricky thing, if you trust your designer, trust their gut feeling. If you don’t trust your designer... :(
is good when styling something specific. Wednesday, May 16, 12 not always possible to find a document order. specificity is BETTER than !important. !important is a nuclear option.
the specificity wars, by refactoring; not by rejecting specificity. Document order is not enough. Keep the same order of specificity at the same level of abstraction.
defaulted. 3.Functions 4.Mixins 5.Placeholder selectors 6.Style Selectors Wednesday, May 16, 12 Placeholders: only import once or use the mixin hack if your module has these Selectors: Usually don't mix with Functions/mixins/placeholders
work Wednesday, May 16, 12 1-2 days of training to become capable. 3-4 weeks to be competent. It will take > 1 month for an experienced team to build a comprehensive styleguide.
Pyramids are probably a bit of an exagguration. These styles will be used and evolved for several years -- an eternity on the internet. These styles will be used by a team. For the love of god, don't do
chriseppstein
koichiotomo
ryomrt
kaminashi
ysknsid25
fujiwara3
sudoakiy
oracle4engineer
tacck
tammyeverts
akexorcist
tadaken3
sinsoku
skipperchong
wjessup
reverentgeek
cromwellryan
rmw
shpigford
moore
tenderlove
marktimemedia
addyosmani
lauravandoore
kastner
