DesignSafe-CI / DS-User-Guide

User Guide for DesignSafe
https://www.designsafe-ci.org/user-guide/
0 stars 8 forks source link

added 2 new use cases from Ahsan Kareem - stylesheet not style attr #18

Closed wesleyboar closed 4 months ago

wesleyboar commented 4 months ago

Overview

Illustrate how to use CSS via stylesheet, not styleattribute.

Status

[!WARNING] Reference only. Feel free to cherry-pick.

Related

Changes

Testing

  1. Run docs.
  2. Open http://0.0.0.0:8000/user-guide/usecases/workinprogress/.
  3. Compare <hr> styling to #17.

UI

before i.e. #17 after i.e. …
replicate html and inline styles css update

Notes

Original method had drawbacks:

  1. redundant <hr>s Only one "horizontal rule" is necessary. Two is semantically inaccurate. If intent is styling, remember HTML is for structure and meaning, not styling.
  2. duplicate complex code As seen in #17, updating the code requires updating duplicates of old instances.
  3. inline styles Inline styling is one of the last resorts in CSS, because of a feature called specificity… basically, style has the power of a Star Wars "Star Destroyer", which makes it difficulty to properly override via a stylesheet.
wesleyboar commented 4 months ago

This PR is just a reference. I can't technically make it a PR to merge into #17, because #17 is from a fork.