Stylesheet Documentation & Refactoring

[fatihbalsoy]

Main Issue

The current code base was designed and dedicated to a single WordPress website in 2017. Most of the CSS can be removed and refactored.

Style-Guide.md or Contributing.md Draft

Most, if not all, CSS selectors should have a comment on top of them to clearly describe what it is and optionally include a path to the most recent screenshot of the component or layout. Screenshots are uploaded to docs/images/.

Here's an example of the style guide described above in SCSS:

// Button Description
// Image: docs/images/components/button.jpeg
// Guidelines: https://m3.material.io/components/all-buttons
button {
  // ...
}

You can use the Image Preview extension for Visual Studio Code to view the images while hovering your cursor over the image link.

Stylesheets dedicated to layouts like an admin bar should have something like this at the top:

// -----------------------------------------------------------------------------
// This file contains all styles related to the admin bar of the site.
// Image: docs/images/layout/admin_bar.png
// Guidelines: https://m3.material.io/components/top-app-bar/overview
// -----------------------------------------------------------------------------

#wpadminbar 
  .ab-empty-item {
    // ...
  }

  // ...
}

Guideline links are optional for both component and layout documentation. More than one guideline link can be added to the documentation.