Help! My Stylesheets are a Mess!

5 min read Original article ↗
  • Help! My Stylesheets are a Mess! Wednesday, May 2, 12

  • You Have Unpredictable Bugs Wednesday, May 2, 12

  • You Have Property Soup Wednesday, May 2, 12

  • You Need STRUCTURE Wednesday, May 2, 12

  • You Need PATTERNS Wednesday, May 2, 12

  • You Need RULES Wednesday, May 2, 12

  • You Need CLARITY OF INTENT Wednesday, May 2, 12

  • The Problem is Wednesday, May 2, 12

  • The Problem is YOU Wednesday, May 2, 12

  • LOOKING GOOD is not done Wednesday, May 2, 12

  • NAME You have to Wednesday, May 2, 12

  • ORGANIZE You have to Wednesday, May 2, 12

  • DISSECT You have to Wednesday, May 2, 12

  • DOCUMENT You have to Wednesday, May 2, 12

  • WORK HARD You have to Wednesday, May 2, 12

  • REFACTOR CONSTANTLY You have to Wednesday, May 2, 12

  • Container border, box shadow, padding Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Wednesday, May 2, 12

  • Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 2, 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.

  • Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 2, 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.

  • Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 2, 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.

  • Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 2, 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.

  • Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 2, 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.

  • Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 2, 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.

  • Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 2, 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.

  • Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 2, 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.

  • Naming is Hard Wednesday, May 2, 12

  • Naming is a Collaboration Designers must pick or approve the

    name. Unfortunately, designers are not often good at naming things. Wednesday, May 2, 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.

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • The Name Game Wednesday, May 2, 12 THESAURUS!!!

  • Benefits Everything has a place Wednesday, May 2, 12