The single hardest part of front-end development at scale is making changes to code and understanding all of the visual and behavioral effects that will occur as a result.
When you build a component, tests should be written that expose each state a component can be in. This test should generate a static html file and a corresponding image for every discrete state a component can be in.
| /* ADOBE */ | |
| footer [class*=resp-navwr-] nav>a { | |
| display: none; | |
| } | |
| footer .region-footer .resp-navwr-region nav.region-list>ul i { | |
| display: none; | |
| } | |
| .vjs-default-skin.vjs-controls-disabled .vjs-control-bar { | |
| display: none; |
| /* STACKOVERFLOW */ | |
| .edit-block { | |
| display: none; | |
| } | |
| #feed-link-text { | |
| display: none; | |
| } | |
| .faq-page .col-section>.col-detail { | |
| display: none; |
| /* APPLE */ | |
| #globalheader .gh-tab-search.enhance .gh-search, | |
| #globalheader .gh-tab-search.enhance.active .gh-search { | |
| display: none; | |
| } | |
| .directorynav>.column input { | |
| display: none; | |
| } | |
| #globalheader { |
| /* YAHOO */ | |
| .BreakPoint .Bp-1 .Box2, | |
| .BreakPoint .Bp-1 .Box3, | |
| .BreakPoint .Bp-1 .Box4, | |
| .BreakPoint .Bp-1 .BoxLast, | |
| .BreakPoint .Bp-2 .Box3, | |
| .BreakPoint .Bp-2 .Box4, | |
| .BreakPoint .Bp-2 .BoxLast, | |
| .BreakPoint .Bp-3 .Box4, |
| .marketing-input-focus+.marketing-form__messages .error+.suggest, | |
| .marketing-input:focus+.marketing-form__messages .error+.suggest, | |
| .marketing-input.focus+.marketing-form__messages .error+.suggest, | |
| .marketing-textarea:focus+.marketing-form__messages .error+.suggest, | |
| .marketing-textarea.focus+.marketing-form__messages .error+.suggest { | |
| display: none; | |
| } | |
| .marketing-nav-wrapper.js-is-active .icon-caret-down { | |
| display: none; | |
| } |
| /* INSTAGRAM */ | |
| .spring-refresh.page-home #reactModalMountPoint { | |
| display: none; | |
| } | |
| .page-accounts .password-reset p:not(.form-text):not(.form-actions) { | |
| display: none; | |
| } | |
| .hide { | |
| display: none !important; |
| /* SALESFORCE */ | |
| .product-selector { | |
| display: none; | |
| } | |
| .header-nav-container .header-nav-list li .search-container { | |
| display: none; | |
| } | |
| .media.left>.media-hdr>.media-title, | |
| .media.right>.media-hdr>.media-title { |
| /* MEDIUM */ | |
| .metabar--postSecondaryBar .voteWidget--text .icon--heart { | |
| display: none; | |
| } | |
| .metabar-shareActions .button>.icon--readingList2:before, | |
| .metabar-shareActions .button.is-active>.icon--readingList2outline:before { | |
| display: none; | |
| } |
| /* PINTEREST */ | |
| .BoardPage.placeBoardV2.mapView .transformWrapper .BoardHeader .boardHeaderWrapper { | |
| display: none; | |
| } | |
| .BoardPage.placeBoardV2.mapView .transformWrapper .Grid .gridContainer .AddPinRepWithPlace { | |
| display: none; | |
| } | |
| .BoardPage.placeBoardV2.mapView .transformWrapper .Grid .GridFooter { | |
| display: none !important; |