[META] Class/CSS cleanup

Created on 19 December 2022, about 2 years ago
Updated 24 March 2023, almost 2 years ago

Problem/Motivation

There are a few issues in the Svelet app with classnames and the selectors used for CSS styling:

  • When PB was prototyped, many classes were used to speed up development, but not intended to be there long term There are instances of classes that are intended for a specific thing in Drupal, and project browser is using the classnames despite not being used for that specific thing. For example, filters have the .views-exposed-form__item class, but they are not views filters. These should be changed to something accurately named. In some cases this will have the additional benefit of less CSS needed since in some cases there is styling in place specifically to undo Drupal's built-in styling for that class
  • There are many instances of Svelte components targeting html tags (<button>, <a>, etc). This makes it difficult for custom stylesheets to override because such overrides would target all instances of that tag. Any tag name selectoring should be converted to classes
  • Project browser probably doesn't have to adhere 100% to BEM CSS methodology, but it should lean more in that direction. This makes it easier to know what custom stylesheets are targeting, and the selectors will use a pattern we're already familiar with

Steps to reproduce

Proposed resolution

Create multiple child issues - could be per component or batches of components. Reference this as the parent issue describing what needs to be changed, and refactor the classes & CSS selectors as needed.

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
🌱 Plan
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024