A Comprehensive Guide to CSS: Insights from the King of CSS, Kevin Powell

Introduction

In this special guest issue, tech industry experts Matt Lawrence and Mike Karan are delighted to present insights from the esteemed Kevin Powell, widely celebrated as the "King of CSS" within the web development community. With his unparalleled passion for teaching and a knack for making complex concepts accessible, Kevin has guided countless learners toward mastering web development. This comprehensive guide dives deep into the essentials of CSS, the pivotal role of foundational web technologies, and the seamless transition to using modern frameworks and tools. Whether you're a budding web developer or looking to refine your skills, this article is packed with valuable insights and actionable advice to elevate your web development journey.

Topics covered in this article include:

The importance of learning vanilla CSS before diving into frameworks
An overview of advanced CSS features and their practical applications
How to effectively use CSS preprocessors like Sass and PostCSS
Navigating the world of CSS frameworks: Choosing the right one for you
Understanding CSS naming conventions and their relevance in modern web development
Strategies for ensuring cross-browser compatibility
Breaking free from tutorial hell: Tips for applying what you learn
The distinction between web developers and web designers
Kevin's recommended path from vanilla web development to mastering frameworks
Setting up a local React development environment: A beginner's guide

About Kevin Powell

Kevin Powell is celebrated in the web development community as the "King of CSS 👑," and he is well known for his passion and enthusiasm, which creates an engaging and enjoyable learning atmosphere for his students.

Kevin's mission is to simplify web development and make it understandable for everyone! His YouTube channel has nearly 1 million subscribers and features over 700 videos, gathering over 80 million views, highlighting his major impact on the web development community!

Beyond YouTube, Kevin helps developers' learning journeys through articles, premium courses, and his Discord community.

His motto, "Keep on making your corner of the internet just a little bit more awesome," perfectly reflects his positive and motivational teaching style and approach to web development!

What is CSS

CSS, short for Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. It defines how elements on a web page should be displayed, including layout, colors, fonts, and animations.

Although the CSS definition is easy to understand, actually coding with it is difficult to master! Let's dive into this article with Kevin, who has extensive experience and deep knowledge of CSS, to learn all about it!

Learn Vanilla CSS First

Kevin has witnessed a common thread in his 10-plus years of CSS teaching experience: students who jump into learning CSS frameworks before having a solid foundation in CSS fundamentals tend to struggle.

This self-inflicted struggle occurs when students face issues they can't solve. The difficulty in pinpointing solutions comes from a lack of a strong CSS foundation, which makes it difficult to differentiate between vanilla CSS and the framework.

Vanilla CSS means using the basic, unaltered CSS code to design web pages as it's officially defined. This plain CSS can be directly understood and used by web browsers to display websites as intended. However, CSS libraries and frameworks, which developers use to speed up and enhance their design process, cannot be immediately understood by browsers. They often require processing or compiling into standard CSS, which the browser can then read and apply to style web pages. That's why learning vanilla CSS is essential! It lays the groundwork for understanding how styling works at its core, ensuring you can effectively use and appreciate the benefits of CSS frameworks later on.

Once you have mastered vanilla CSS, you can properly utilize frameworks and take advantage of their many features, which will make you more productive instead of frustrated!

Advancements in Vanilla CSS

To further emphasize the importance of learning vanilla CSS, Kevin explains that CSS is becoming more advanced, allowing you to do much more with it. As a result, some of the tools we previously relied on are not as important as they used to be.

One such feature is CSS nesting, which was initially a capability exclusive to CSS preprocessors such as Sass, Less, and Stylus. This capability allows you to write CSS rules within other CSS rules, allowing for hierarchical rule structuring, mirroring HTML organization, and improving code maintainability. As of now, direct browser support for CSS nesting is still evolving and not yet widely implemented. We will discuss how to check the support for CSS features later in this article.

Scope

Kevin also highlights the relevance of vanilla CSS skills, emphasizing their applicability in modern frameworks that utilize component scoping, a technique used to limit the impact of styles to specific components or parts of a webpage. This is particularly relevant in modern web development frameworks like Svelte, Vue, and Astro, which embrace a component-based architecture.

📝🔗To help determine if you know enough vanilla CSS to move on to a framework, we got you covered with the following article:

Mastering CSS Fundamentals: Knowing When To Transition from Basics to Frameworks

CSS Tools & Frameworks

Kevin advises us that learning to use CSS tools such as Sass and PostCSS can simplify the transition from vanilla CSS to something more complex, such as learning a framework.

Sass

Sass is a preprocessor that extends CSS. It allows you to use variables, nested rules, mixins, and more, making your CSS more maintainable and easier to write. It compiles your code into standard CSS, enabling browsers to interpret it seamlessly.

I enjoy using Sass just for the nested rules! Nesting your CSS code inside a navbar is an easy example to understand.

.navbar {
  background-color: black;
  .nav-link {
    color: white;
    &:hover {
      color: lightgray;
    }
  }
}

Once you've set up Sass, you work directly in the Sass file. Every time you save your changes, the Watch command automatically compiles those changes into the CSS file for you!

sass --watch input.scss:output.css

So, are you ready to give Sass a try? Kevin created this beginner-friendly YouTube series: Getting started with Sass

After exploring how Sass simplifies CSS management, consider PostCSS your gateway to using new CSS features immediately! Learning these tools first better prepares you for learning CSS frameworks.

PostCSS

PostCSS is a powerful tool for transforming CSS with JavaScript, enabling you to use future CSS features today! It acts as a plugin-based ecosystem, allowing you to write styles with modern syntax that gets compiled into compatible CSS for all browsers.

PostCSS does take some configuring to get up and running, but no worries! Kevin's got you covered with this YouTube video: Learn how to power-up your CSS with PostCSS

CSS Frameworks

Once you are comfortable with vanilla CSS and you are ready to learn a framework, a good rule of thumb that even Kevin agrees with is to check your local job listings to see what technologies they use.

Some businesses or government roles might use older technologies. So, depending on your needs, the newest CSS frameworks might not be the best choice.

Popular CSS Frameworks for Web Development include:

Bootstrap: An open-source framework for responsive web development, offering grid systems and components.
Tailwind CSS: A utility-first framework for direct in-HTML styling, emphasizing rapid UI development.
Foundation: A responsive framework with tools for web and app design, focusing on flexibility.
Bulma: A modern, Flexbox-based framework for clean and minimalistic web design.
Materialize: Inspired by Google's Material Design, this framework provides UI components for user-friendly interfaces.

Kevin points out that Tailwind is gaining a lot of traction because it works well with React (an in-demand JavaScript framework). Tailwind CSS works well with React because it lets you style quickly inside JSX code. This fits perfectly with how React is built around components, making it easy to style each component directly. Tailwind's short class names also make changing designs faster and keep code clean, improving React projects by keeping the styling and code together in the same files.

Once you have chosen a CSS framework that suits you, Kevin advises you to build side projects using it. This approach gives you the hands-on experience needed to learn the framework and provides you with projects that you can showcase to potential employers!

CSS Naming Conventions

What are naming conventions, and are they still relevant?

Naming conventions in CSS are systematic ways of naming classes, IDs, and other selectors to enhance code readability, maintainability, and scalability. These conventions help you to understand the structure and purpose of the CSS code at a glance, making it easier to navigate, update, and collaborate on web development projects. Common examples include BEM (Block Element Modifier), OOCSS (Object-Oriented CSS), and SMACSS (Scalable and Modular Architecture for CSS), each offering different methodologies for organizing CSS code effectively.

Okay, sure, but are they still relevant? Although the emergence of newer frameworks has redirected some attention from traditional methods, CSS naming conventions still hold relevance.

However, their importance has slightly decreased. Kevin suggests that CSS naming conventions are becoming niche practices instead of being the industry standard they once were.

If you would like a brief overview of what BEM looks like and how it works, be sure to check out Kevin's (older) YouTube video: Why I use the BEM naming convention for my CSS

Browser Support

When you become a professional web developer, it's no longer just about getting your code to work; it's now about getting it to work for everyone. Specifically on multiple browsers!

To know if specific code works on individual browsers, a web developer's best friend is the Can I Use website!

The Can I Use website provides up-to-date, detailed compatibility tables that show the support status of HTML5, CSS3, SVG, and other web technologies across major browsers. By simply entering a feature you're curious about, you can instantly see which browsers support it and to what extent. This resource is invaluable for making informed decisions during development, helping you create websites that offer a consistent experience for all users, regardless of their browser choice.

Now, the important question is,*" When should I implement new features?"*

Kevin wisely advises against introducing anything that will break your website, especially if it's a production website! Instead, use new features that introduce progressive enhancements. Kevin suggests the "scroll timeline" as a safe example to use because it's merely an enhancement that won't break your website if the browser doesn't support it.

Breaking the Cycle of Tutorial Hell

Have you followed a tutorial, completed it successfully, and understood the code during the process but then found yourself unable to apply what you learned to your projects? If you constantly seek new tutorials in the hope of finally grasping how to code independently, only to end up in the same situation, you're experiencing what's known as "🔥Tutorial Hell!🔥"

Don't worry, we've all been there! The first step to getting out of tutorial hell is understanding when you're in it!

Kevin explains that there is definitely a difference between understanding something and being able to do something. This means you might easily grasp how the code works when following tutorials, but writing functional code on your own is a different challenge.

Breaking the cycle of tutorial hell requires getting lots of hands-on practice by working on your own projects without relying on tutorials. If you encounter coding problems, look for solutions online. Nowadays, you can even consult an AI to help you solve coding issues and act as your personal tutor! In time, with practice and study, you will understand the code and apply it confidently to your projects.

Note: Kevin explains that "learning" and "trying to get something into production" are different things. And in time-sensitive scenarios, it's okay to copy code rather than retype it from scratch.

Web developer & Web Designer

When you break out of tutorial hell and venture out into creating your own projects, now that you're capable of writing functional code, you'll likely encounter a new problem: your projects look like @!#?@!

Kevin tells us NOT to get discouraged! It turns out that coding and designing are actually two separate jobs. Have you ever heard of a UI/UX Designer?

To get good at "web design," Kevin recommends getting lots of hands-on practice! You can achieve this by practicing on coding platforms like iCodeThis and Frontend Mentor.

iCodeThis is a dynamic platform offering daily coding challenges to sharpen your skills. Each day presents a new challenge, giving you 24 hours to tackle it. The platform is designed to be user-friendly, featuring an in-browser IDE that allows you to start coding immediately. As you complete projects, they're added to your profile, creating a portfolio you can showcase to potential clients or employers. Additionally, iCodeThis fosters a supportive environment through its Discord community, where developers can collaborate and assist each other in overcoming the challenges.

Frontend Mentor offers real-world HTML, CSS, and JavaScript challenges, simulating professional projects to improve your coding skills. Each challenge includes designs, assets, and a specification, allowing you to build a project, receive feedback from a community of developers, and see others' solutions for learning and comparison.

Learn Responsive Web Design

with Kevin Powell

Course level: Intermediate

This course will take you to a professional level in responsive web design. You'll learn to build advanced layouts while solving fun coding challenges along the way.

This bootcamp includes

15 hours of content - 173 lectures
Tons of interactive challenges
Certificate of completion

Kevin's Recommended Path From Vanilla Web Development

You can't build a website with CSS alone! Learning the pillars of web development in their vanilla forms first is strongly recommended: HTML, CSS, and JavaScript.

When you are ready to step out of the vanilla zone, Kevin recommends learning Astro (time permitting). If you're not actively seeking employment and have the time to continue learning, Astro is a great choice because it's a modern static site generator that enables you to build fast, scalable websites using less client-side JavaScript. Kevin points out that it's a great step before diving into more complex frameworks like React.

When you're actively looking for a job, as mentioned before, it's wise to look at your local job listings (or remote jobs that interest you) to see which frameworks are in demand. This will help you make an informed choice. If you're still undecided, React is a popular and highly sought-after framework, and many online schools teach it.

Setting Up a Local React Development Environment

When learning web development, platforms like freeCodeCamp, Codepen, or Scrimba offer tools that let you code in your web browser, eliminating the need for traditional desktop IDEs like Visual Studio Code.

When you are ready to transition from learning online to creating your own local environment, my Hashnode Featured article, How to Create a Local React Environment with Vite, provides step-by-step instructions.

If you are ready to take it further, I wrote a follow-up step-by-step instruction article that I often reference myself: Create a React Project, Push It to GitHub, and Deploy With Netlify, From the Command Line

Kevin Powell Links

Kevin Powell | CSS Evangelist

HTML All The Things

Be sure to listen to the episode!

🎙 CSS: Styling the Web & Learning Through Content w/ Kevin Powell

Be sure to check out HTML All The Things on socials!

Learn with Scrimba!

Learn to code using Scrimba with their interactive follow-along code editor.
Join their exclusive discord communities and network to find your first job!
Use our affiliate link

This article contains affiliate links, which means we may receive a commission on any purchases made through these links at no additional cost to you. This helps support our work and allows us to continue providing valuable content. Thank you for your support!

Conclusion

Kevin emphasizes the importance of mastering vanilla CSS before diving into frameworks. This approach helps avoid the unnecessary frustration of not being able to distinguish between issues caused by regular CSS and those introduced by frameworks. He also highlights that vanilla CSS is evolving! Advanced features like CSS nesting reduce the need for certain preprocessors, so you can use your vanilla CSS skills to great effect in modern frameworks that use component scoping, such as Svelte, Vue, and Astro

Although Kevin believes they are becoming a niche, CSS naming conventions like BEM, OOCSS, and SMACSS continue to enhance code readability, maintainability, and scalability. While their importance has slightly decreased with the emergence of newer frameworks, they remain relevant for organizing CSS code effectively, so you will still see them and may have to use them at organizations you work for!

As you transition into a professional web developer, it's important to make sure your code works across multiple browsers! The "Can I Use" website is a key resource, providing compatibility tables for web technologies across various browsers and aiding in informed development decisions. Kevin advises easing into using new features that offer progressive enhancements that will NOT break websites, such as the "scroll timeline," which will add a nice look if the browser supports it without causing errors.

"Tutorial Hell" is something that we all fall into. It's taking tutorial after tutorial without gaining the skills you need to code projects independently. The way to break out of this unproductive cycle is first to recognize when you're stuck in it. Then the key is to get plenty of hands-on practice by working on personal projects and seeking your own solutions to problems as they arise, progressively building the ability to code confidently on your own.

After overcoming the reliance on tutorials, you may face challenges with the aesthetic aspect of your projects. Kevin emphasizes that coding and design are distinct skills, suggesting that improving web design requires practice. He recommends platforms like iCodeThis and Frontend Mentor, which provide daily coding challenges and real-world project simulations to enhance coding and design skills through hands-on experience and community feedback.

When you are comfortable enough in the basics of HTML, CSS, and JavaScript, Kevin advises learning to work with Astro before jumping straight into more complicated frameworks such as React (time permitted). Astro is a modern static site generator that helps you build fast, scalable websites with less client-side JavaScript. Kevin recommends learning Astro because it eases the transition from basic web development to advanced frameworks by providing you with hands-on experience with various front-end technologies.

To help you choose the framework best suited for you, Kevin suggests looking at local or desired remote job listings to see which frameworks are in demand. If you are unsure, React is a popular option.

When learning web development, platforms like freeCodeCamp, Codepen, or Scrimba offer browser-based coding, eliminating the need for desktop IDEs. Transitioning to a local development environment? My Hashnode Featured article, "How to Create a Local React Environment with Vite," gives detailed instructions. For further advancement, check out my guide: "Create a React Project, Push It to GitHub, and Deploy With Netlify, From the Command Line," for step-by-step setup instructions.

Be sure to sign up for Kevin Powell's newsletter for exclusive tutorials and tips on deepening your web development skills and staying on top of industry trends! You can also join his Discord to connect with a community passionate about learning and growth. Ready for more? Dive into Kevin's premium courses to master web development from the basics to the advanced. Subscribe, join, and continue your journey to becoming a king of CSS yourself today!

Let's connect! I'm active on LinkedIn and Twitter.

selftaughttxg logo