CSS: Unavoidable Bad Parts
14 hours ago
- HTML5 semantic tags like <main>, <article>, <nav> help structure pages; less obvious elements like <ul>, <details>, <dl> are also useful.
- Avoid excessive wrapper elements; prefer semantic markup and CSS that works with it.
- Layout is fundamentally hard in GUI frameworks; understand the layouts a system allows rather than forcing your own.
- Browser default styles differ, so use a CSS reset or normalization for consistency.
- Classless CSS (styling HTML elements directly) can be effective after reset, avoiding complex selectors.
- CSS selectors enable problematic inheritance; consider classless CSS/inline styles or component-scoped nesting.
- Always set box-sizing: border-box to make padding and borders not affect overall size.
- Margin collapsing combines margins via max rather than sum, which is useful but surprising; consider using owl selector for parent-controlled spacing.
- Default flow layout is document-oriented; use flexbox for spatial control.
- Responsive design can often be avoided by relying on HTML's inherent reflow and setting max-width on text columns.
- CSS pixels are visual angle units, not physical pixels; sizing in pixels works across displays.
- Font-size is inconsistent across fonts; use font-size-adjust to normalize, and check readability on different configurations.
- Line-height can cause unexpected shifts when mixing fonts; it's the height of a line box, not the glyph height.
- Vertical rhythm (aligning lines across elements) is often unnecessary for single-column layouts.
- Word-break issues occur with long unbreakable spans like code or URLs; use tips to prevent horizontal overflow.