Page MenuHomePhabricator
Create Task
Maniphest T101302

Duplicated css rules - use more generic class names
Closed, DeclinedPublic
Actions

Description

Review existing css rules and duplicate declarations
(Report generated via https://gist.github.com/jdlrobson/05c66707da88f9325a6b)

{#page-actions} AND {.client-js nav .secondary-action} share 5 declarations
  - border: none
  - border-bottom: none
  - position: absolute
  - right: 0
  - top: 0
{#page-actions} AND {.content-overlay} share 4 declarations
  - padding-right: 16px
  - position: absolute
  - right: 0
  - top: 0
{.overlay .content-header} AND {.overlay .panel} share 4 declarations
  - border-bottom-style: solid
  - border-bottom-width: 1px
  - padding-left: 16px
  - padding-right: 16px
{#mw-mf-diffview #mw-mf-userinfo} AND {.content-overlay} share 4 declarations
  - left: 0
  - padding-bottom: 1em
  - padding-top: 1em
  - right: 0
{.overlay .cleanup li .issue-notice:before} AND {.page-list .list-thumb,.topic-title-list .list-thumb,.site-link-list .list-thumb} share 4 declarations
  - height: 100%
  - left: 0
  - position: absolute
  - top: 0
{.client-js nav .secondary-action} AND {.cloaked-element} share 4 declarations
  - bottom: 0
  - position: absolute
  - right: 0
  - top: 0
{#footer}, {.alpha .pre-content,.beta .pre-content} AND {.overlay .panel} share 4 declarations
  - padding-left: 3.35em
  - padding-left: 16px
  - padding-right: 3.35em
  - padding-right: 16px
{.alpha #page-actions,.beta #page-actions} AND {.mw-mf-special #content_wrapper .content-header h2} share 4 declarations
  - border-bottom: none
  - font-size: 1.1em
  - padding-right: 0
  - padding-top: 0
{.cloaked-element} AND {.content-overlay} share 4 declarations
  - left: 0
  - position: absolute
  - right: 0
  - top: 0
{.category-header li} AND {.page-header-bar li,.page-header-bar div} share 4 declarations
  - border-bottom: 1px solid #ddd
  - line-height: 1.5
  - padding: 5px 0 0
  - text-align: center
{.client-js nav .secondary-action} AND {.notifications-overlay .user-button} share 4 declarations
  - padding-right: 0
  - position: absolute
  - right: 0
  - top: 0
{.category-header li a} AND {.mw-mf-watchlist-selector li a} share 4 declarations
  - border-bottom: 3px solid transparent
  - color: #555
  - display: block
  - margin: 0 1px 0 0
{.alpha .drawer.quick-lookup .watch-this-article,.alpha .drawer.quick-lookup .cancel} AND {.alpha .drawer.references .cite .cancel,.beta .drawer.references .cite .cancel} share 4 declarations
  - cursor: pointer
  - padding: 1em 0
  - position: absolute
  - top: 20px
{.category-header li}, {.content .thumbborder}, {.content table.wikitable}, {.content table.wikitable > tr > th,.content table.wikitable > tr > th,.content table.wikitable > * > tr > th,.content table.wikitable > * > tr > td}, {.header .search}, {.overlay .comment .wikitext-editor} AND {.warningbox} share 4 declarations
  - border-bottom-style: solid
  - border-bottom-width: 1px
  - border-left-style: solid
  - border-left-width: 1px
{.alpha #content_wrapper .pre-content,.alpha #mw-mf-nearby,.beta #content_wrapper .pre-content,.beta #mw-mf-nearby} AND {.alpha .overlay-header-container .overlay-header,.alpha .overlay-content,.beta .overlay-header-container .overlay-header,.beta .overlay-content} share 3 declarations
  - margin: 0 auto
  - max-width: 1000px
  - padding: 0 3.35em
{nav ul.hlist li} AND {nav ul.hlist li a} share 3 declarations
  - border: none
  - border-bottom: none
  - margin-left: 0
{.drawer .cancel} AND {.overlay .content .cancel} share 3 declarations
  - display: block
  - margin-left: auto
  - margin-right: auto
{.content table} AND {.overlay .content .cancel} share 3 declarations
  - display: block
  - margin-bottom: 1em
  - margin-top: 1em
{.category-header li} AND {.mw-mf-watchlist-selector li} share 3 declarations
  - border-left: 1px solid #ddd
  - display: inline-block
  - margin: 0 0 0 -1px
{.mw-mf-cleanup} AND {.mw-mf-image-replacement} share 3 declarations
  - display: inline-block
  - padding-bottom: 10px
  - padding-top: 10px
{.client-js nav .secondary-action} AND {.mw-mf-watchlist-selector li} share 3 declarations
  - border-bottom: none
  - border-left-style: solid
  - border-left-width: 1px
{.alpha #page-actions,.beta #page-actions} AND {.mw-mf-special #content_wrapper .pre-content} share 3 declarations
  - border-bottom: none
  - padding-right: 0
  - padding-top: 0
{.client-js nav .secondary-action} AND {.search-overlay input} share 3 declarations
  - border: none
  - border-bottom: none
  - padding-right: 0
{.client-js .search-box .search} AND {.mw-notification-area.error,.toast.error} share 3 declarations
  - background-repeat: no-repeat
  - border: none
  - border-bottom: none
{.mw-mf-special #content_wrapper #section_0} AND {.mw-mf-special #content_wrapper .content-header h2} share 3 declarations
  - border-bottom: none
  - font-weight: bold
  - text-align: center
{.alpha .header > .header-title} AND {.content-overlay} share 3 declarations
  - position: absolute
  - text-align: center
  - top: 0
{.client-js .toc-mobile} AND {.wikidata-infobox} share 3 declarations
  - margin-left: 0
  - margin-right: 0
  - position: relative
{.alpha .drawer.quick-lookup .cancel} AND {.alpha .drawer.references .cite .cancel,.beta .drawer.references .cite .cancel} share 3 declarations
  - font-size: 0.8em
  - margin: -1em -1em -1em 0
  - right: 20px
{.alpha .drawer.references .cite .cancel,.beta .drawer.references .cite .cancel} AND {.alpha .mw-mf-cleanup,.beta .mw-mf-cleanup} share 3 declarations
  - font-size: 0.8em
  - padding-left: 0
  - padding-right: 0
{.alpha .pre-content,.beta .pre-content} AND {.overlay .content-header} share 3 declarations
  - padding-left: 16px
  - padding-right: 16px
  - padding-top: 20px
{.content table.infobox th,.content table.infobox td} AND {.content table.wikitable > tr > th,.content table.wikitable > tr > th,.content table.wikitable > * > tr > th,.content table.wikitable > * > tr > td} share 3 declarations
  - border-bottom-style: solid
  - border-bottom-width: 1px
  - padding: .2em
{.content-overlay} AND {.notification-count} share 3 declarations
  - position: absolute
  - right: 0
  - text-align: center
{.overlay .panel} AND {.pre-content} share 3 declarations
  - padding-left: 16px
  - padding-right: 16px
  - padding-top: 12px
{#footer} AND {.overlay .cleanup li .issue-notice} share 3 declarations
  - padding-left: 16px
  - padding-right: 16px
  - padding-top: 2em
{.overlay .panel} AND {.pre-content #section_0} share 3 declarations
  - border-bottom-style: solid
  - border-bottom-width: 1px
  - padding-top: 12px
{.alpha #page-actions,.beta #page-actions}, {.alpha #section_0,.beta #section_0}, {.mw-mf-special #content_wrapper .content-header h2}, {.mw-mf-special #content_wrapper .pre-content} AND {.search-overlay input} share 3 declarations
  - border-bottom: none
  - padding-bottom: 0
  - padding-top: 0
{#page-actions}, {.client-js nav .secondary-action}, {.cloaked-element}, {.content-overlay} AND {.notifications-overlay .user-button} share 3 declarations
  - position: absolute
  - right: 0
  - top: 0
{.cloaked-element}, {.content-overlay}, {.overlay}, {.overlay .cleanup li .issue-notice:before}, {.page-list .list-thumb,.topic-title-list .list-thumb,.site-link-list .list-thumb} AND {blockquote:before} share 3 declarations
  - left: 0
  - position: absolute
  - top: 0
{.alpha .drawer.quick-lookup .watch-this-article,.alpha .drawer.quick-lookup .cancel}, {.alpha .drawer.references .cite .cancel,.beta .drawer.references .cite .cancel} AND {.content-overlay} share 3 declarations
  - padding-bottom: 1em
  - padding-top: 1em
  - position: absolute
{.alpha .header > .header-title}, {.client-js nav .secondary-action} AND {.cloaked-element} share 3 declarations
  - bottom: 0
  - position: absolute
  - top: 0
{.client-js nav .secondary-action}, {.cloaked-element} AND {blockquote:after} share 3 declarations
  - bottom: 0
  - position: absolute
  - right: 0
{#mw-mf-diffview #mw-mf-userinfo}, {.cloaked-element} AND {.mw-notification-area,.toast,.drawer} share 3 declarations
  - bottom: 0
  - left: 0
  - right: 0
{.alpha .mw-mf-cleanup,.beta .mw-mf-cleanup}, {.alpha .pre-content .tagline,.beta .pre-content .tagline} AND {nav ul.hlist li} share 3 declarations
  - font-size: 0.8em
  - margin-left: 0
  - margin-right: 0
{#mw-mf-diffview #mw-mf-userinfo}, {.overlay-footer-container a} AND {pre} share 3 declarations
  - padding-bottom: 1em
  - padding-right: 1em
  - padding-top: 1em
{#mw-mf-diffview #mw-mf-diffarea}, {#mw-mf-diffview #mw-mf-userinfo} AND {pre} share 3 declarations
  - padding-left: 1em
  - padding-right: 1em
  - padding-top: 1em
{#mw-mf-diffview #mw-mf-userinfo}, {.notifications-overlay .mw-echo-notification} AND {pre} share 3 declarations
  - padding-bottom: 1em
  - padding-left: 1em
  - padding-right: 1em
{.content-overlay} AND {.overlay-footer-container a} share 3 declarations
  - padding-bottom: 1em
  - padding-top: 1em
  - text-align: center
{.notifications-overlay .mw-echo-notification} AND {.overlay .panel} share 3 declarations
  - border-bottom: 1px solid #eee
  - padding-left: 3.35em
  - padding-right: 3.35em

Related Objects

Event Timeline

Jdlrobson created this task.Jun 3 2015, 8:17 PM
Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: Web-Team-Backlog.
Jdlrobson moved this task to Triaged but Future on the Web-Team-Backlog board.
Jdlrobson subscribed.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 3 2015, 8:17 PM
• bmansurov mentioned this in T101301: Refactor Special pages.Jun 3 2015, 8:19 PM
• bmansurov claimed this task.Jun 3 2015, 8:46 PM
• bmansurov added a project: Mobile-Web-Sprint-48-Voyage-of-the-Damned.
• bmansurov set Security to None.
• bmansurov moved this task from Needs Analysis to Doing on the Mobile-Web-Sprint-48-Voyage-of-the-Damned board.
• bmansurov removed • bmansurov as the assignee of this task.Jun 3 2015, 9:09 PM
• bmansurov subscribed.

OK, so this needs some discussion. The csscss tool just spits out common lines from completely different modules. For example, I don't see why the first rule {#page-actions} AND {.client-js nav .secondary-action} share 5 declarations should be shared. These rules style different things and are located in different files (not even similar files). So, suppose we want to create a shared file for these two rules and we load that file in those two modules. Now we need to keep creating shared files just to reduce 3-4 lines of CSS. In the long run, our modules are coupled and we can't easily change something without breaking another thing. I suggest we just generalize rules that belong to similar pages, i.e. Special pages as described in T101301. Do you guys agree?

• bmansurov removed a project: Mobile-Web-Sprint-48-Voyage-of-the-Damned.Jun 3 2015, 9:09 PM
Jdlrobson added a comment.Jun 3 2015, 9:13 PM

+1 to discussion :) The report is a bit dumb so hence why we need to review them. For instance things like .notifications-overlay .mw-echo-notification and .overlay .panel look like they might share some kind of semantic meaning so it would be good to explore that.

I don't know enough about {#page-actions} AND {.client-js nav .secondary-action} but a .secondary-action and a .page-action should also carry a class .action if that makes sense, since their class names are so similar.

{.alpha .drawer.quick-lookup .cancel} AND {.alpha .drawer.references .cite .cancel,.beta .drawer.references .cite .cancel} share 3 declarations

  • font-size: 0.8em
  • margin: -1em -1em -1em 0
  • right: 20px

on the face of it could be simplified to .alpha .drawer .cancel

Some don't look so obvious though.

Jdlrobson added a comment.Jun 3 2015, 9:14 PM

To be clear I wouldn't suggest sharing files, i'm just suggesting looking at what we're doing and standardising on concepts just as we have with .drawer, .overlay .view etc... and making more generic css rules.

Jdlrobson added a comment.Aug 14 2015, 12:46 AM

This is likely out of date now and probably needs to be re-run.

Jdlrobson closed this task as Declined.Aug 24 2015, 6:51 PM
Jdlrobson claimed this task.

Created T110092 which is more specific and actionable

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL