Open masakudamatsu opened 1 year ago
For CSS variables, we can use something like
--minimum-target-size: 48px;
--close-button-size: var(--minimum-target-size);
// ButtonCircle.js
const setClickableArea = `
height: var(--close-button-size);
width: var(--close-button-size);
`
// DivPopup.js
const setPadding = `
padding: var(--close-button-size);
`;
[ ] Replace
id
selector (e.g.,#map
) with the attribute selector ([id="map"]
), to avoid an unnecessary specificity increase. (see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#making_selectors_specific_with_and_without_adding_specificity)[ ] Use the parent selector to handle specificity
[ ] Follow CUBE CSS methodology (cf. https://www.smashingmagazine.com/2021/07/global-local-styling-nextjs/)
[ ] Use CSS variables instead of JavaScript (i.e.
designtokens.js
) (see comment below for detail)[ ] Deal with #348
[ ] Deal with #231
[ ] Deal with #230
[ ] Deal with #181
[ ] Deal with #180