gitmyhub

css-protips

★ 30k updated 1y ago

⚡️ A collection of tips to help take your CSS skills pro 🦾

CSS Protips is a curated collection of practical tips for writing cleaner, more correct CSS, covering layout tricks, browser consistency fixes, and less-obvious features, each with a brief explanation and a working code example.

setup: easycomplexity 1/5

CSS Protips is a curated list of practical tips for writing better CSS — the language used to control the visual appearance of web pages. CSS (Cascading Style Sheets) handles things like colors, fonts, layout, and spacing, but it has many quirks and less-obvious features that can trip up developers or lead to messy, hard-to-maintain code.

Each tip in the collection addresses a specific situation. For example, one explains how to reset default browser styles so your page looks consistent across different browsers. Another shows how to center an element vertically on a page using modern layout techniques. Others cover topics like maintaining the correct aspect ratio for images, applying borders to all navigation items except the last one without writing two conflicting rules, hiding autoplay videos that are not muted, and using relative units for font sizes to make text scale properly on different screen sizes.

The tips range from beginner-friendly basics (add a line height to the body element once rather than repeating it for each text element) to more advanced selectors and CSS features. Each tip includes a brief explanation of the problem it solves and a small code example showing the solution, along with links to interactive demos.

You would use this as a reference when building or maintaining a website and wanting to do things the cleaner or more correct way, rather than reaching for a workaround. It is plain CSS documentation — no specific programming language or framework is required.

Where it fits