CSS Wisdom from Goofus and Gallant

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

I found some old Highlights magazines and these Goofus and Gallant characters sure had some prescient wisdom to share.

Goofus sneezes his overly specific selectors and !important rules all over the codebase. Gallant carefully follows the low specificity naming conventions of the project and cleans up after his messes.

Goofus blasts his opinions around like fact and makes open conversation difficult. Gallant helps lead discussions with his peers about the possibilities, advantages, and disadvantages of different choices.
Goofus needs a higher z-index value for his widget so he selfishly makes it 9999999999. Gallant makes a reduced test case of has problem and shows his co-workers.
Goofus “fixes” the design bug by adding an inline style. Gallant figures out where the design pattern went wrong so he can address the root cause.
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Comments

  1. Janet Atkinson
    Permalink to comment#

    Love it!

  2. Rob
    Permalink to comment#

    These are awesome! Looks like the 2nd-to-last one needs a has/his switch, btw.

  3. Dean Peterson
    Permalink to comment#

    The business love Goofus he’s a miracle worker. He get’s things done.

    The business can’t understand why Gallant takes so much time to get simple things done.

  4. Kyle Jenkins
    Permalink to comment#

    Forwarded to the whole dev team at Highlights… These are great!

  5. Luis Betancourt
    Permalink to comment#

    hahah , that was funny.

  6. gopalakrishnan
    Permalink to comment#

    Wow!!! A moral story for CSS syllabus. Cool

  7. Damian Muszkiet
    Permalink to comment#

    Sweet ^.^

  8. Robert Diaz
    Permalink to comment#

    This is the best!! Flexin’ the old css funny bone :)

  9. Anselm Urban
    Permalink to comment#

    Haha :D love it!

  10. Melissa
    Permalink to comment#

    This is amazing.

  11. Aslam
    Permalink to comment#

    I have to change the way i code :)

  12. Steve C.
    Permalink to comment#

    I attempt at all times to be Gallant… but when timeframes, budgets, and frustration over a site that has already been butchered by others plays into the picture…. well, sometimes I find myself becoming Goofus. Grit my teeth and say, “Ugh!!! Forget this… inline style and and an !important reference and I’m done!”

    Usually, though, it’s only after the time, budget, demands, QA cow has already been let out of the barn.

    Anyone else see this happen?

This comment thread is closed. If you have important information to share, please contact us.