CoursesAI WorkshopCompaniesPricingBlogNewsletter
  • Courses
  • AI Workshop
  • Companies
  • Pricing
  • Blog
  • Newsletter
Subscribe
  • Courses
  • Companies
  • Communities
  • Blog
  • Gift card
  • Newsletter
  • Help
  • Shop
  • ConfAiBot
  • Contact
  • Legal notice
  • General conditions
  • Privacy policy
  • Cookies policy

Course of Best Practices with CSS: Selectors

Standard
María BarriosRafa Gómez

By María Barrios y Rafa Gómez – Frontend

Learn to apply best practices to your CSS selectors by understanding the fundamentals well.

Go to course

In this course we will delve into this and see how to apply these practices to create a CSS that is much more readable and maintainable.

💸 First lesson available without registration 💸

You will learn to:

  • 🚀 Understand how to use CSS selectors efficiently.
  • 👌 Apply good practices when using them, recognizing well-known and common patterns.
  • 🏆 Finally understand specificity like an expert and use that knowledge to your advantage by programming a much more maintainable and readable CSS.
  • ⭐️ Make the most of the advantages offered by using preprocessors like SASS.
  • 🥳 Know the latest updates that CSS offers us and see that it is increasingly difficult to say that it is not a programming language.

Videos of the course

  • 💔 My CSS is broken: in what order are styles rendered?
  • ❌ 3 Common Mistakes Using CSS Selectors

  • 🏗 Maintainable CSS: use specificity to your advantage
  • 👓 Readable CSS: intent selector with BEM
  • 💻 Improve the development experience with SASS

  • 🔏 Things you could do and didn't know: ::first-letter, ::marker, ::cue, and more.
  • 🧠 Good practices with pseudo-elements: ::before and ::after
  • 🔎 Put a linter in your life: how to avoid common syntax errors

  • ✅ Custom checkbox: :pseudo-classes vs classes.
  • 🚨 Validate your forms without JS!
  • ♿️ Accessible forms: semantic HTML and ARIA attributes.

  • 🦉 Manage spacing between elements: owl pattern
  • 👶🏻 Select specific children: :first-child(), :last-child(), :nth-child(), …
  • 🔖 Select specific elements: :first-of-type: :last-of-type, :nth-of-type(), …

  • 🫴🏻 Logical combinators: :is(), :where(), :has()
  • 🪺 Nest classes without SASS: @nesting
  • 📦 Limited class scope: @layers

  • 🤷🏻‍♀️ Because I don't use tailwind in my code
  • 🤟 Next steps
Go to course

Related courses

Standard
Tailwind CSS: Architecture and Best Practices

🚤 Tailwind CSS: Architecture and Best Practices

Paco CastellóRafa Gómez

Learn how to structure your Tailwind CSS projects following best practices.

See course
Standard
Job offers

📄 Job offers

Javier FerrerRafa Gómez

Codely verified job offers

See course
Standard
Next.js: Open Graph Images

🖼️ Next.js: Open Graph Images

Javier FerrerRafa Gómez

Generate dynamic images in your Next.js projects for sharing on social media.

See course
See full catalogue

Pay according to your needs

lite (only monthly)

19 €
per month
  • Essential programming courses to build a solid foundation
Popular

standard

24,92 €
Discount vs monthly of 49 €
Annual payment of 299 €
per month
  • Main catalog to master writing maintainable, scalable, and testable code
  • Receive job offers verified by Codely
  • Company invoice
  • Accumulate renewal discounts

premium

41,58 €
Discount vs monthly of 89 €
Annual payment of 499 €
per month
  • Exclusive AI courses to keep you always up to date
  • Early access to new courses
  • Discount on workshops
  • Receive job offers verified by Codely
  • Company invoice
  • Accumulate renewal discounts

We won't increase the price while your subscription is active

SubscribeSign in