Page MenuHomePhabricator

MFA: Spike [8hr] Review CSS code conventions and improve to minimise chance of UI regressions
Open, NormalPublic

Description

Should we adopt a CSS naming convention?
Should we discourage nesting and cascading selectors?

With those conventions
all CSS is easily relatable to HTML parts and can find if it can be deleted (impossible with cascading)
minimizes unexpected styling because there's no cascading
encourages thinking of UI components instead of styling documents
naming convention helps understand UI element, its parts, and state modifiers, and extra utility classes
Here are some resources to consider if we would be up for this:

Article that explains the problems: https://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/
Most used conventions:
SUIT CSS: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
BEM CSS: http://getbem.com/naming/
They can be enforced via stylelint: Example: https://github.com/suitcss/stylelint-config-suitcss
We haven't been hit by the .search bug many times, but it is certain that looking at some pieces of CSS it is very hard to impossible to know to which UI elements they will apply on the whole page.

We should also explore OOCSS: https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

Timebox: 8hrs, involving all members of the team. Owner should facilitate and collate the results of the conversation.

Outcome

  • Define the problem
  • Discuss changes that may help remove that problem (frameworks/enforcing conventions)
  • Agree on some guidelines on how to proceed (if any)
  • Capture these details in a new task tagged epic and reading-web-backlog.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 9 2017, 10:17 PM

Just to compare, OOCSS is the opposite of SUIT. OOCSS says make styles independent and litter the html with classes. Styles may apply to many html elements. Cascading is fine.

SUIT & BEM are component based, a model which matches component based UIs more than documents (kind of like react or native UIs) and it intends that 1 style will be applied just to 1 HTML structure. Cascading is not cool because it is unpredictable.

Jdlrobson renamed this task from Review CSS code conventions and improve to minimise change of UI regressions to Spike [8hr] Review CSS code conventions and improve to minimise change of UI regressions.Apr 13 2017, 11:27 PM
Jdlrobson triaged this task as Normal priority.
Jdlrobson added a project: Spike.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Epics/Goals to Triaged but Future on the Readers-Web-Backlog board.
Jdlrobson added subscribers: pmiazga, bmansurov, phuedx.

@phuedx @bmansurov @Jhernandez @pmiazga do you think this is ready to work on or does it need more fleshing out?
My thought was we should all carve out some time to meet this coming sprint to discuss this and work out a way forward...

phuedx added a comment.May 2 2017, 9:47 AM

Start by defining the problem and the various symptoms of the problem that we see. Then let's judge the various naming conventions out there and the tradeoffs that we'd have to make. Then we'll pick one (or not!!1) and I guess start updating our CSS, which is an Epic in and of itself.

Jdlrobson updated the task description. (Show Details)May 2 2017, 5:46 PM
Jdlrobson removed Jdlrobson as the assignee of this task.May 8 2017, 9:08 AM
Jdlrobson renamed this task from Spike [8hr] Review CSS code conventions and improve to minimise change of UI regressions to Spike [8hr] Review CSS code conventions and improve to minimise chance of UI regressions.May 12 2017, 2:52 PM

Three days left off sprint. We added T163272 to the sprint so I'm moving this card back to "needs analysis" until we work out which of these tasks is moving to "to do"

Jdlrobson lowered the priority of this task from Normal to Low.Jun 2 2017, 5:13 PM
Jdlrobson raised the priority of this task from Low to Needs Triage.Aug 30 2018, 1:34 AM
Jdlrobson triaged this task as Low priority.Aug 30 2018, 2:36 PM
Jdlrobson raised the priority of this task from Low to Normal.Oct 3 2018, 8:02 PM

Bumping visibility

Just to compare, OOCSS is the opposite of SUIT. OOCSS says make styles independent and litter the html with classes. Styles may apply to many html elements. Cascading is fine.
SUIT & BEM are component based, a model which matches component based UIs more than documents (kind of like react or native UIs) and it intends that 1 style will be applied just to 1 HTML structure. Cascading is not cool because it is unpredictable.

Just a minor note: They don't get completely rid of cascade (which can also turn into a performance issue, having to redefine everything for every component). They, or better at least BEM as I know that better, rely on component/module based cascade. One should define the smallest needed while biggest possible building blocks, generalize their styles to the common denomitaor and leave modfication rules on a per module modifier class. Within such building block it's fine to rely on cascade.

phuedx removed a subscriber: phuedx.Oct 4 2018, 10:01 AM
Jdlrobson renamed this task from Spike [8hr] Review CSS code conventions and improve to minimise chance of UI regressions to MFA: Spike [8hr] Review CSS code conventions and improve to minimise chance of UI regressions.Nov 15 2018, 6:54 PM