facebook pixel, mcanous design, design company, Web design, Marketing

CSS Wisdom from Goofus and Gallant

by | Nov 9, 2015 | Web Development

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 </p> </div> <div class="et_post_meta_wrapper"> </div> </article> </div> <div id="sidebar"> <div id="rpwe_widget-2" class="et_pb_widget rpwe_widget recent-posts-extended"><h4 class="widgettitle">Recent Posts</h4><div class="rpwe-block"><ul class="rpwe-ul"><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="https://mcanousdesign.com/web-design/best-virtual-team-software-tools/" target="_self"><img class="rpwe-alignleft rpwe-thumb" src="https://mcanousdesign.com/wp-content/uploads/2017/10/Best-Virtual-Team-Software-Tools-to-Unlock-The-Power-of-Your-Remote-Workers-800x400-45x45.jpg" alt="Best Virtual Team Software Tools" height="45" width="45" loading="lazy" decoding="async"></a><h3 class="rpwe-title"><a href="https://mcanousdesign.com/web-design/best-virtual-team-software-tools/" target="_self">Best Virtual Team Software Tools</a></h3><time class="rpwe-time published" datetime="2017-10-13T20:19:11+00:00">October 13, 2017</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="https://css-tricks.com/writing-smarter-animation-code/" rel="bookmark"><img class="rpwe-alignleft rpwe-thumb rpwe-default-thumb" src="http://placehold.it/45x45/f0f0f0/ccc" alt="Writing Smarter Animation Code" width="45" height="45"></a><h3 class="rpwe-title"><a href="https://css-tricks.com/writing-smarter-animation-code/" target="_self">Writing Smarter Animation Code</a></h3><time class="rpwe-time published" datetime="2017-10-13T15:02:15+00:00">October 13, 2017</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="https://www.webdesignerdepot.com/2017/10/12-best-web-design-podcasts/" rel="bookmark"><img class="rpwe-alignleft rpwe-thumb rpwe-default-thumb" src="http://placehold.it/45x45/f0f0f0/ccc" alt="12 Best Web Design Podcasts" width="45" height="45"></a><h3 class="rpwe-title"><a href="https://www.webdesignerdepot.com/2017/10/12-best-web-design-podcasts/" target="_self">12 Best Web Design Podcasts</a></h3><time class="rpwe-time published" datetime="2017-10-13T10:45:18+00:00">October 13, 2017</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="http://feedproxy.google.com/~r/onextrapixel/~3/__ZBQygP9Ds/" rel="bookmark"><img class="rpwe-alignleft rpwe-thumb rpwe-default-thumb" src="http://placehold.it/45x45/f0f0f0/ccc" alt="15 Inspiring WordPress Sites" width="45" height="45"></a><h3 class="rpwe-title"><a href="http://feedproxy.google.com/~r/onextrapixel/~3/__ZBQygP9Ds/" target="_self">15 Inspiring WordPress Sites</a></h3><time class="rpwe-time published" datetime="2017-10-11T04:00:01+00:00">October 11, 2017</time></li><li class="rpwe-li rpwe-clearfix"><a class="rpwe-img" href="https://css-tricks.com/making-pure-css-playpause-button/" rel="bookmark"><img class="rpwe-alignleft rpwe-thumb rpwe-default-thumb" src="http://placehold.it/45x45/f0f0f0/ccc" alt="Making a Pure CSS Play/Pause Button" width="45" height="45"></a><h3 class="rpwe-title"><a href="https://css-tricks.com/making-pure-css-playpause-button/" target="_self">Making a Pure CSS Play/Pause Button</a></h3><time class="rpwe-time published" datetime="2017-10-06T14:58:34+00:00">October 6, 2017</time></li></ul></div><!-- Generated by http://wordpress.org/plugins/recent-posts-widget-extended/ --></div><div id="archives-2" class="et_pb_widget widget_archive"><h4 class="widgettitle">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-2">Archives</label> <select id="archives-dropdown-2" name="archive-dropdown"> <option value="">Select Month</option> <option value= October 2017