Refactor UI components

After #4979 is merged, we will refactor components to use BEM and ITCSS. Talk to me (@nmorduch, naomi on the Wagtail slack) if you’re interested in being a part of this effort!

Child issues can be found at the UI overhaul component label and corresponding Project. The child issues are just based on which scss files were in the components folder after rearranging the SCSS. Some may not need any work, and we may need to add more issues.

[lb-]

@thibaudcolas - I have recently worked through a revisit of our stylelint configs with a project I am working on. I think it is a great idea to separate out our ideal (most strict) config into its own repo, and then progressively use it across the scss as we work on it.

Stylelint Packages:

• https://github.com/hudochenkov/stylelint-order - adds rules for enforcing alphabetical ordering (eg. background before color), this may come across as a bit too strict but it really helps to minimise diffs, pick up obvious issues and work in scss that others are using - there may be alternatives though.
• https://github.com/hugomrdias/prettier-stylelint - CLI tool, see below

Styelint Config: I had a look through our existing config, it looks pretty good, I think some rules may need to be re-checked that they are available still.

It would be good to extend the stylelint-config-standard as it is a good set of configs to start with - https://github.com/stylelint/stylelint-config-standard/blob/master/index.js

• max-line-length - this should match the prettier config default IMO - as such, we use 80 chars with "ignore": ["comments", "non-comments"] - https://stylelint.io/user-guide/rules/max-line-length/
• media-feature-name-no-vendor-prefix - + already mentioned - https://stylelint.io/user-guide/rules/media-feature-name-no-vendor-prefix/
• order/properties-alphabetical-order - this is from the stylelint-order plugin mentioned above
• selector-no-vendor-prefix - should not be needed with auto-prefixing + already mentioned - https://stylelint.io/user-guide/rules/selector-no-vendor-prefix/

Stylelint Tooling:

• We have used Prettier Stylelint it is a CLI that runs stylelint fix and then prettier over the top, it helps to easily enforce many of the stylelint rules in an automated way (it makes the properties ordering practical to use).
• Stylelint and prettier can work well together, they do different roles and I think we should use both for our scss files.

[lb-]

@nmorduch I would love to pick up one or two of the scss refactor tickets over the coming weeks, I will keep an eye on this issue.

I have not done BEM but very keen to use it, it seems to make a lot of sense and really love the ITCSS structure!