¿Cuáles son las malas prácticas de CSS para evitar?

Answer 1

Gracias por el A2A;

Aquí hay algunas malas prácticas que debe evitar

• Nombrando tus selectores de CSS innecesariamente descriptivos
• ‘.sqaured-yellow-border-card’ cuando ‘.card’ será suficiente
• Se adhiere a CSS simple (no usa marcos como Bootstrap, Foundation, etc.)
• úsalo: simplemente escribes menos y estos marcos ya han escrito algunas cosas con las que podrías tener problemas, como el buen ol ‘centrando un div’
• ! importante esto,! importante que,! importante! importante
• Si empiezas a usar algunos de estos, crecerán de manera exponencial y las personas que saben cómo escribir CSS casi nunca los usan.
• No ser organizado
• Si tiene clases de CSS para una barra de navegación y los botones dentro de ella también tienen clases de CSS, colóquelas una detrás de la otra en lugar de tener algunas clases de pie de página entre ellas. Obtener la esencia?
• Empujando todo en un archivo CSS
• Tener un archivo CSS de 3500 líneas NO es el camino a seguir. Incluso si se minimiza en una fecha posterior. Debería comenzar a separarlos en ‘vistas’ o ‘componentes’ cuando esté trabajando en un proyecto más grande.

Si tiene curiosidad acerca de las Buenas Prácticas de CSS para adoptar, debe leer mi respuesta aquí (solo 5 de los conceptos más importantes) ¿Cuáles son las buenas prácticas de CSS que debe hacer?

¡Siéntase libre de seguirme en Twitter @Ray_Kim_ ya que constantemente twitteo sobre las mejores prácticas y las próximas tecnologías!

Answer 2

Basado en mi experiencia con CSS como desarrollador, aquí están mis 10 principales “No hacer”

1. No abusar de las clases
   Use ID en lugar de clases donde tenga sentido. Es una forma más rápida para que el navegador acceda a los elementos DOM.
2. No tirar todo en un archivo CSS
   Particiona tu CSS para hacerlo más manejable. Cada archivo CSS se puede dividir en componentes lógicos como header.css, footer.css, etc.
3. No nombre sus selectores “.red-with-green-dashed-lines”
   Nombre a sus selectores en cuanto a cuáles son sus componentes en la página. Por ejemplo, “encabezado a la izquierda”, “contenido-título” o “contenido-fecha” es más descriptivo.
4. No olvides los comentarios
   Los comentarios son extremadamente importantes en CSS para entender cómo cada estilo podría relacionarse con otro y qué esquema de color se aplica a qué componentes.
5. No tengas miedo de Dev Tools
   Cada navegador ahora tiene su propio conjunto de herramientas de desarrollo, generalmente presionando F12. Estas herramientas son críticas cuando se “depura CSS”.
6. No tengas miedo de anulaciones
   Por supuesto, los marcos de CSS como Bootstrap y Foundation son masivos, pero cada uno necesita un pequeño ajuste basado en sus necesidades. Cuando reciba una actualización del marco, se sobrescribirán los cambios. En lugar de profundizar en el enorme archivo CSS, crea un archivo bootstrap-overrides.css para doblar el marco a tu voluntad, pero solo …
7. … ¡No use en exceso! Importante
   La idea general con CSS es que los estilos “caen en cascada” de uno a otro. ! important solo pisotea todos los estilos anteriores y dice “Soy más importante … ¡olvídate de todas esas otras cosas de CSS y utilízame!” 🙂
8. No uses una tonelada de WebFonts
   Esto puede ser algo obvio, pero hay personas que realmente aman su tipografía. Use una o dos (máximo tres) WebFonts para su sitio y vuelva a los valores predeterminados del navegador para mantener su sitio optimizado.
9. No codifique a mano TODO su CSS
   Para mantener su CSS SECO (No se repita), use un preprocesador de CSS como LESS o SASS. El mayor beneficio de usar este preprocesador es que puede definir su esquema de color en la parte superior y reutilizarlo en todo su CSS en lugar de rastrear cada color cuando tenga que modificarlos.
10. No dejes que tu CSS se convierta en “obeso”
    Los espacios en un archivo CSS ocupan … umm … espacio. Ya que todos queremos que nuestro CSS se cargue extremadamente rápido, use un minificador de CSS para reducirlo antes de implementarlo en un sitio.

Si bien no existe una “Práctica recomendada de CSS”, cada empresa (o individuo) tiene una cultura o una forma determinada de implementar CSS.

Estos son solo algunos de mis “No hacer” al escribir CSS como desarrollador.

Espero que esto haya ayudado!

(¡No te olvides de votar!)

Answer 3

• Usando el selector de ID para múltiples elementos . Solo debe haber una identificación en el HTML. Usa el atributo de clase para elementos múltiples
• Nombres de selección crípticos / inespecíficos. Si no le asigna a sus elementos el ID o los nombres de clase adecuados, podría encontrarse mirando este código unos meses más tarde pensando: “¿qué … qué estaba pasando aquí? Es un hábito especialmente bueno para tener cuando todavía no está en la documentación
• Sobre especificar cuándo es mejor dejarlo abierto . Por lo general, está bien ser muy específico para componentes de tamaño pequeño a mediano, pero si se encuentra repitiendo una gran cantidad de código, ese estilo probablemente debería ser un selector independiente. Mantenlo seco (no te repitas)
• El uso excesivo de! Importante . CSS tiene un proceso lineal, por lo que es importante tener una buena organización del código para que haya pocos o ningún conflicto en los estilos

Estos son todos los consejos que puedo pensar en este momento.