Skip to main content
Home / Articles /

CSS Wisdom from Goofus and Gallant

Avatar of Chris Coyier
Author
Chris Coyier
16 Comments
Go to Comments
Published
Updated

Rollout: Powerful Feature Flag Management

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.
Frontend Masters logo

Need some front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, from Testing to Security.

Comments

  1. User Avatar
    Janet Atkinson
    Permalink to comment#

    Love it!

  2. User Avatar
    Rob
    Permalink to comment#

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

  3. User Avatar
    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. User Avatar
    Kyle Jenkins
    Permalink to comment#

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

  5. User Avatar
    Luis Betancourt
    Permalink to comment#

    hahah , that was funny.

  6. User Avatar
    gopalakrishnan
    Permalink to comment#

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

  7. User Avatar
    Damian Muszkiet
    Permalink to comment#

    Sweet ^.^

  8. User Avatar
    Robert Diaz
    Permalink to comment#

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

  9. User Avatar
    Anselm Urban
    Permalink to comment#

    Haha :D love it!

  10. User Avatar
    Melissa
    Permalink to comment#

    This is amazing.

  11. User Avatar
    Aslam
    Permalink to comment#

    I have to change the way i code :)

  12. User Avatar
    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.