Skip to content

Latest commit

 

History

History

css

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

README.md

README.md

 
 

box.gif

box.gif

 
 

README.md

Preguntas para entrevistas de frontend

CSS

Preguntas

  1. ¿Cuál es la diferencia entre selectores de ID o CSS?
  2. ¿Cuál es la diferencia entre "resetear" y "normalizar" el CSS (reset.css y normalize.css)? ¿Cuándo elegirias uno u otro?
  3. Describe la propiedad "float" y como funciona
  4. ¿Cómo funciona el z-index y el context stacking (contexto de apilamiento) de elementos?
  5. ¿Conoces alguna de las "técnicas de limpieza" de estilos (clearing techniques)?
  6. ¿Cómo funcionan los sprites de CSS, y cómo los podrías implementar?
  7. ¿Cuál sería tu approach para solucionar problemas con un browser específico?
  8. ¿Cómo desarrollas sitios con features específicas por navegador?
  9. ¿Cómo visualizas o ocultas visualmente el contenido (o habilitas la visualización solo para screen readers)?
  10. ¿Has usado un sistema de grid? ¿Cuáles prefieres y por qué?
  11. ¿Has usado media-queries? ¿Para qué?
  12. ¿Has usado o creado estilos con SVG? ¿En qué situaciones?
  13. ¿Cómo optimizas tu sitio para imprimir?
  14. ¿Cuáles son algunos de los "detalles" para escribir CSS eficiente?
  15. ¿Cuáles son las ventajas/desventajas de usar preprocesadores de CSS?
  16. De los preprocesadores que has usado, ¿cuál prefieres y por qué?
  17. ¿Cómo implementarías un sitio Web que usa tipografías no estándar?
  18. ¿Sabes cómo un browser determina que elementos emparejar con que reglas de CSS?
  19. ¿Qué son los pseudo-elementos, para qué sirven, dónde y cómo se utilizan?
  20. Explica el modelo de cajas. (box model)
  21. ¿Qué hace: * { box-sizing: border-box; }? ¿Cuáles son sus ventajas?
  22. ¿Qué valores existen para "display"?
  23. ¿Cuál es la diferencia entre inline and inline-block?
  24. ¿Cuál es la diferencia entre relative, fixed, absolute y static al definir la posición de un elemento?
  25. La 'C' en CSS quiere decir 'Cascading'. ¿Cómo el browser define la prioridad al asignar estilos? ¿Cómo se puede sacar ventaja de esto?
  26. ¿Qué frameworks de CSS has usado localmente y/o en producción? ¿Cómo los mejorarías?
  27. ¿Has usado Flexbox o Grid? ¿Qué puedes decirme de ellos?
  28. ¿En qué se diferencia el diseño responsivo del diseño adaptable?
  29. ¿Hay alguna razón por la que usarías translate() por sobre position: absolute, (o viceversa)?
  30. ¿Qué puedes contarme de postCSS?
  31. ¿Qué puedes contarme de cssNext?
  32. ¿Cómo el CSS afecta al critical-render-path? (El proceso de "carga, analisis y renderizado" de un sitio Web)

Respuestas

Los sprites en CSS hacen referencia a una imagen que puede servir para muchas situaciones. Para implementarlas se puede llamar tanto a la propiedad background-image con background-position por separado, como llamar directamente a la propiedad background y asignar todos los valores en la misma línea.

En esta documentación, se explica el uso de la propiedad background, de la cual obtenemos por separado el background-image y background-position.

http://www.w3schools.com/css/css_image_sprites.asp

Sí, he ocupado son Semantic y Bootstrap 3 y 4. Personalmente, prefiero Bootstrap por el fácil manejo de grillas y como uno encuentra todo mejor documentado, aparte, es super simple y util de ocupar.

Luego de adjuntar todos los estilos necesarios a un elemento, se adjuntan los estilos de menor prioridad a mayor, y se sobre-escriben, por ejemplo:

<html>
 <head>
   <style>
     p {
       color: red;
     }
     #mi_id {
       color: grey;
     }
   </style>
 </head>
 <body>
   <p id="mi_id" style="color: blue"> </p>
 </body>
</html>

En este caso la especificidad sería:

p             {}  /* especificidad = 0,0,0,1 */
#mi_id        {}  /* especificidad = 0,1,0,0 */
style=""          /* especificidad = 1,0,0,0 */

Finalmente, el color del contenido de <p id="mi_id" style="color: blue"> </p> es azul.