Til Tracker

Clarification: CSS Styling Consolidation Effects

Context: We discussed visual changes after my CSS cleanup (buttons, fonts, tags).
Buttons: Change to blue (#007bff) resulted from my consolidating multiple previous rules for .button and input[type="submit"] into one consistent style for simplicity.
Fonts: Adding font-family: inherit; to form inputs/textareas ensures they use the main body font stack, improving consistency.
Tags: Change from pill-shaped (border-radius: 10rem;) to squared (border-radius: 4px;) was part of my cleanup for a cleaner look.
Learning: CSS consolidation aims for simplicity but can alter appearance. I learned that explicit styles (font-family: inherit;) prevent varying browser defaults. Intentional style changes should be noted.

Tags: css frontend ui ux refactoring button font tags consistency css-cleanup

Learned on: April 21, 2024 Edit

Textarea font different from input fields

Issue: The font in the textarea (body field) differed from input fields (e.g., title).
Cause: Textareas often default to a monospace font in browsers, while other inputs might inherit the body font. The shared CSS rule for inputs/textarea didn't explicitly set font-family.
Resolution: I added font-family: inherit; to the shared CSS rule for input, textarea.
Learning: I learned to explicitly set font-family: inherit; on form controls (input, textarea, select, button) to ensure they consistently use the base font defined higher up in the CSS cascade (e.g., on body), avoiding default browser discrepancies.

Tags: frontend ui ux css html form font textarea input

Learned on: April 19, 2024 Edit

Learnings

Clarification: CSS Styling Consolidation Effects

Textarea font different from input fields