Best of CSS — January 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    CSS Cheat Sheet - Interactive, not a PDF

    A comprehensive cheat sheet for CSS properties, including alignment, animation, background, border, font, margin, padding, and more.

  2. 2
    Article
    Avatar of medium_jsMedium·2y

    We Forgot Frontend Basics

    This post discusses how frontend development has become overcomplicated with endless trends and paradigms, and highlights the importance of mastering basic skills, such as vanilla JavaScript, HTML, and CSS. It also provides tips for improving frontend development skills.

  3. 3
    Article
    Avatar of moderncssModern CSS Solutions·2y

    12 Modern CSS One-Line Upgrades

    Learn about 12 modern CSS one-line upgrades that can improve your application's CSS. The upgrades include stable fixes for hacks or long-standing issues, improved experiences with well-supported modern properties, and progressive enhancements. Some of the properties explored are aspect-ratio, object-fit, text-underline-offset, margin-inline, text-underline-offset, outline-offset, scroll-margin-top/bottom, color-scheme, accent-color, width: fit-content, overscroll-behavior, text-wrap, and scrollbar-gutter.

  4. 4
    Video
    Avatar of t3dotggTheo - t3․gg·2y

    Oh no, I think I like this

    The post discusses the issue of overflow in flexbox and suggests setting a minimum width of zero to fix it. It also explains the impact of the minimum width property on flexbox behavior.

  5. 5
    Article
    Avatar of devtoDEV·2y

    CSS Grid vs. Flexbox: Choosing the Right Layout Technique

    CSS Grid and Flexbox are two layout techniques with different strengths and use cases. CSS Grid offers precise control over rows and columns, making it ideal for complex layouts. Flexbox excels in one-dimensional layouts, providing flexibility in content distribution. Both techniques can be used together for the most effective results.

  6. 6
    Video
    Avatar of communityCommunity Picks·2y

    How I'm Writing CSS in 2024

    CSS in 2024 has become easier and more powerful with support for container queries, nesting, and other exciting features. This post discusses the state of CSS, recommendations for optimizing CSS performance, and different CSS styling solutions available in 2024.

  7. 7
    Article
    Avatar of builderiobuilder.io·2y

    Modern CSS for 2024: Use Cases for :has()

    Discover the power of the :has() pseudo-class in CSS. Learn about its versatile use cases and how it revolutionizes dynamic styling. Find out which browsers support this powerful tool.

  8. 8
    Article
    Avatar of devtoDEV·2y

    How to become a pro-level developer by working on simple projects.

    Learn how to become a pro-level developer by actively participating in open-source projects and working on simple projects that provide industry-standard experience.

  9. 9
    Article
    Avatar of devtoDEV·2y

    CSS :has() pseudo class

    The CSS :has() pseudo class is finally supported by all major browsers, allowing styling of parent elements based on their children. It offers a lot of new possibilities and has been a much-awaited feature. Learn more about the :has() pseudo class on MDN.

  10. 10
    Article
    Avatar of smashingSmashing Magazine·2y

    CSS Blurry Shimmer Effect — Smashing Magazine

    Learn how to create a blurry shimmer effect using CSS by combining properties such as box-shadow, backdrop-filter, and gradients. The effect adds depth to designs and can be applied to elements like popups or tooltips.

  11. 11
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    What is the Document Object Model? DOM for Beginners

    Explanation of how HTML, CSS, and JavaScript work together in web development. Introduction to the DOM and how it enables JavaScript to manipulate web pages.

  12. 12
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    CSS Units – When to Use rem, em, px, and More

    Learn about different CSS units like rem, em, px, and percentages. Find out when to use each unit and how they work.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    Why Tailwind Isn't for Me

    The author explains why they do not like Tailwind CSS, citing concerns about its HTML structure, compatibility issues with other CSS frameworks, reliance on non-standard features like `@apply`, lack of support for web components, and encouragement of div/span-tag soup in markup.

  14. 14
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Create Custom CSS Animations with Examples

    Learn how to create custom CSS animations using keyframes. Understand the prerequisites, create your first animation, add multiple keyframes, create repeat animations, use timing functions, and combine multiple animations.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    console.delight – Frontend Masters Boost

    Discover how you can use CSS, SVGs, and HTML in console messages to create unique effects. Find out the differences between console.log and console.info. Explore the capabilities and limitations of non-text elements in the console.

  16. 16
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Use CSS Flexbox to Break Elements Out of Their Containers

    Learn how to use CSS Flexbox to break elements out of their containers and optimize readability of a webpage. Discover the benefits of using CSS Flexbox for this purpose.

  17. 17
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Build a Stepper Component in React

    Learn how to build a stepper component in React using Tailwind CSS. Set up the project, build the stepper layout, add functionality, and pass props to the stepper component.

  18. 18
    Article
    Avatar of communityCommunity Picks·2y

    Tech stack rebuild for a new Facebook.com

    Facebook.com underwent a complete rebuild of its tech stack to improve performance and user experience. The improvements included reducing CSS, code-splitting JavaScript, modernizing data-fetching, and implementing faster navigation. The redesign is gradually rolling out to all users.

  19. 19
    Article
    Avatar of devtoDEV·2y

    A Guide to Styling Tables

    A guide to styling tables, including structuring tables, styling tables with collapsed borders, adding zebra stripes, and aligning text.

  20. 20
    Article
    Avatar of hnHacker News·2y

    Only 90s Web Developers Remember This

    The post reminisces about the practices and innovations in web development during the 90s, including the 1x1.gif trick and the use of pixel fonts. It also mentions the use of DHTML and the obsession with buttons.

  21. 21
    Video
    Avatar of communityCommunity Picks·2y

    How I'm Writing CSS in 2024

    CSS in 2024 is becoming easier and more powerful with support for container queries, nesting, and other exciting features. Recommendations include optimizing styles for fast loading, styling solutions like CSS modules, Tailwind CSS, and StyleX, and considering streaming in the development process.

See all CSS archives