1. Curso de HTML / CSS
    2. /
  2. CSS
    3. /
  3. CSS - Selectores, especificidad y metodología (VII)
1 / 1

CSS - Selectores, especificidad y metodología (VII)

Metodologías

Igual que para el resto de disciplinas de la programación, la idea es estandarizar para cada proyecto cómo se haría para no generar problemas.

Opción 1: usar un framework.

Y centrarte en él exclusivamente. Ventajas: Está ya todo ya hecho. Desventajas: te atas a una dependencia.

Puede ser por clases como Bootstrap o de utilidades como Bulma o TailwindCSS.

Ejemplo de Bootstrap 5:

<header class="d-flex justify-content-center py-3">
  <ul class="nav nav-pills">
    <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
    <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
  </ul>
</header>

Ejemplo de TailwindCSS:

<header>
  <nav class="navbar navbar-expand-lg shadow-md py-2 bg-white relative flex items-center w-full justify-between">
    <div class="px-6 w-full flex flex-wrap items-center justify-between">
      <div class="navbar-collapse collapse grow items-center">
        <ul class="navbar-nav mr-auto lg:flex lg:flex-row">
          <li class="nav-item">
            <a class="nav-link block pr-2 lg:px-2 py-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="light">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link block pr-2 lg:px-2 py-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="light">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link block pr-2 lg:px-2 py-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="light">Pricing</a>
          </li>
          <li class="nav-item mb-2 lg:mb-0">
            <a class="nav-link block pr-2 lg:px-2 py-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="light">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

No siempre se puede depender 100% de un framework o no se adapta a lo que necesitamos.

🠀 Anterior Siguiente →