¿Cuál es la mejor manera de usar CSS? (NO * aprende * pero realmente * usa *)

Question

Conozco CSS y estoy aprendiendo patrones cada vez más comunes. Sin embargo, siempre siento que estoy pirateando en lugar de hacerlo de la manera correcta.

Por ejemplo, algunas personas que respeto me dicen que usar el restablecimiento de css es innecesario mientras que otros viven para él. Además, hay tantos marcos de css geniales (para grids, etc.) que, incluso creyendo que los entiendo, nunca sé cuándo usarlos.

Así que, básicamente, mi pregunta es: una vez que comprenda cómo funciona CSS, ¿hay un enfoque reconocido como "mejor" utilizado por un excelente desarrollador web? Como en python, uno debe tratar de usar el patrón común y leer PEP 8. O, en C++, después de entender la sintaxis, leer la serie efectiva de Meyer es una excelente "segunda" lectura.

Perdón por tomar tanto tiempo para explicar ... Simplemente no quería tener una respuesta como: Lea "Principio de CSS" que explica cómo cambiar el fondo o cómo configurar la fuente. Realmente estoy buscando un buen enfoque estándar.

• ¿Debo usar el restablecimiento?
• ¿Deberíamos usar solo un archivo por sitio? Una para la página de inicio y otra para el resto? ¿Un archivo básico y una vez diferente para cada sección grande?
• ¿Es malo tener un archivo de 2k + css? ¿Significa que debería haber sido refactorizado y que contiene mucho duplicado?
• Debo definir padre en la parte superior para fuente normal, color, h1, etc., y luego, cuando sea diferente, cámbielo por secciones ... o en su lugar siempre use el estándar y redefina cada sección.
• ¿Debo usar .class y #id un poco en todas partes, o debería tratar de minimizarlos y en su lugar utilizar descriptor larga tales como:

    .content .main tr td span a 
    or 
    span.classname a 

Gracias!

tl/dr:

Cuál es la mejor "segundo" leer una vez que ya entiende CSS, pero quisiera utilizar de una manera limpia/profesional?

[EDIT]

Gracias a todos por su respuesta. Sé que hice muchas preguntas ... pero solo fueron ejemplos para la pregunta real que es: ¿Cuál es la mejor "segunda" lectura una vez que ya entiendes CSS pero me gustaría usarla de una manera limpia/profesional? Es decir, tenía la esperanza de leer un libro que explicara los ejemplos que propuse ... pero también explicaría muchas otras cosas que no son cs-sintaxis sino más css-best-professional-use.

Answer 1

Puedo responder a sus preguntas según mi propia experiencia, no necesariamente las mejores prácticas que existen.

• Restablecí ciertas etiquetas, pero no todas las etiquetas como los "puristas de CSS". Tenga en cuenta que si usa ciertas bibliotecas de CSS, como la interfaz de usuario de JQuery, el menú de Superfish, etc., restablecer las etiquetas puede arruinar realmente estas UI de bibliotecas.
• Normalmente tengo un archivo CSS de diseño/configuración general y cada página complicada tiene su propio archivo CSS. Entonces, cada página incluye estos 2 archivos CSS más los archivos de mi biblioteca de UI (JQuery UI, etc.). Esto me facilita apuntar y mantenerlo.
• 2K + ?? Sí, muy mal de hecho.Si tiene un archivo tan grande, realmente debería usar YSlow para ver cuánto tarda en cargar ese archivo. Cuanto más tiempo tarde en cargar su página, más rápido los usuarios abandonan su página web, a menos que se vean obligados a usarla. : D
• Siempre me gusta "alcance" mi CSS, prefijando con decir #app. Esto garantiza que mi configuración global solo afecte el contenido y el diseño de mi página, y no anulan las bibliotecas de UI.
• Use .class y #id de la forma en que tenga sentido para usted. Si sabe que esta etiqueta existe solo una vez, utilice #id. Si sabe que podría ocurrir más de una vez en la página, entonces la única opción es usar .class.

Answer 2

• Restablece: creo que sí, algunos de ellos no les gusta, por lo que toca a usted para averiguar cuál le gusta
• dividir archivos unificadas vs.: Depende. Hay ventajas para ambos (chorus: ventajas, ventajas!) Un archivo CSS es más fácil de navegar, y puede encontrar claramente las relaciones en un solo archivo. Por otra parte, si ha planificado la estructura de su sitio, está desarrollando widgets compartimentados, o tiene mucha gente trabajando en los archivos de confirmación CSS, un método descentralizado podría beneficiarlo. Con múltiples archivos CSS, siempre puede usar un compresor para servirlos al cliente como un único archivo, por lo que es más una cuestión de mantenimiento.
• Large Files/Line Count: ¿Estás diciendo que tienes 2,000 archivos CSS (¡Mierda!) O 2,000 archivos CSS en línea. Ambos no son geniales, aunque este último se puede administrar con bastante facilidad en un IDE que proporciona contornos y maneja la herencia para usted. El primero ... bueno, al menos tiene seguridad laboral.
• Definiciones parentales: Nuevamente, no hay una respuesta correcta. Las reglas de CSS para un sitio pequeño variarán mucho de un sitio de nivel empresarial. Un buen punto de partida podría ser comprobar cómo jQueryUI maneja los estilos y luego formar su propia opinión a partir de ahí.
• Selectores correctos: Steve Souders talked about optimizing CSS selectors, llegando a la conclusión de que no vale la pena para un sitio web normal. Por lo tanto, ignorando la optimización de CSS y basado en su ejemplo, yo diría que el segundo es más fácil de mantener y, en última instancia, mucho más predecible. Si HTML cambia incluso ligeramente, el primero se romperá rápidamente. El segundo no lo hará, y es mucho más portátil.

Hay cosas que puede hacer en CSS para hacer su vida más fácil. Recomiendo usar un sistema de cuadrícula para el diseño (blueprint, 960GS, etc.). Personalmente me gusta usar un reinicio ya que hace que los diseños perfectos en píxeles sean más fáciles de administrar. Aparte de eso, investiga lo que las personas como Eric Meyers o el sitio me gusta alistapart.com o smashingmagazine.com tienen que decir sobre el tema.

tl; dr - no hay respuesta correcta, pero definitivamente algunas buenas opciones

Answer 3

La gente tendrá una gama de respuestas para estas preguntas, pero aquí están los enfoques que tomaría:

Restablecer

Si está trabajando en un diseño frágil, que podría romperse fácilmente si algunos píxeles no están donde usted espera, considere usar un reinicio. Me gustaría ver en normalize.css.En lugar de sobrescribir por completo los valores predeterminados del navegador, suaviza las diferencias entre los navegadores.

También podría considerar el restablecimiento de elementos específicos si se encuentra agregando un lote de margin: 0; a sus hojas de estilo.

dividir documentos CSS

• Google recommends splitting them up para que las páginas individuales no están obligando a los usuarios a descargar montones y montones de reglas de estilo que no se utilizan realmente en la página que están visitando.
• Yahoo recommends combining files para reducir al mínimo el número de requestion HTTP
• Obviamente, la búsqueda de un equilibrio es importante, y this SO question pesa algunos de los pros y los contras.

¿Clases e ID o cadenas largas de selectores?

Intento mantener las clases y las identificaciones al mínimo (en mi HTML y mi CSS). Tienden a ser más frágiles cuando construyes páginas que otros actualizarán con editores WYSIWYG. Agregué algunas ID o clases a grandes bloques de la página, luego uso CSS para apuntar a elementos específicos dentro de esos bloques. Esto es más fácil si evita la anidación profunda en su HTML tanto como sea posible.

Trabajar con un preprocesador CSS como LESS o SASS puede ayudarlo a escribir hojas de estilo más legibles. La capacidad de anidar reglas de estilo tanto en LESS como en SASS me ha ayudado a evitar una gran cantidad de problemas relacionados con la especificidad.

Sin embargo, la especificidad es un buen tema CSS estar familiarizado con:

• CSS-tricks tiene a good article covering specificity
• El W3C's own documentation vale la pena leer.

Recursos adicionales

En lo que la lectura adicional se refiere ...

• SitePoint's collection of articles and tutorials on CSS es un gran recurso para los tutoriales de CSS más avanzados, y que también cuentan con algunos buenos artículos que cubren CSS problemas que son más avanzados que lo que encontrarías en muchos libros para principiantes.

Answer 4

Como con muchas cosas no hay realmente derechos y errores, se trata más de preferencia y capacidad de administración.

Utilizo CSS Reset en algunos elementos, prefiero el inicio del lienzo en blanco en lugar de encontrar una carga de valores predeterminados desconocidos.

No creo que el tamaño del archivo sea realmente un problema, de nuevo, lo que es más fácil de administrar es realmente más importante. Divida el archivo si es lógico hacerlo.

Reflexione sobre la optimización e intente evitar la duplicación innecesaria. Me gusta definir una fuente/estilos padre como lo llamas para el estilo más comúnmente utilizado, luego solo defino los otros según sea necesario.

Personalmente me gusta definir algunas clases comunes, no estoy seguro si es óptima, pero es muy útil, como por ejemplo:

.bold {font-weight: bold} 
.clear {clear: both} 
.red {color: red} 

Si hace esto para los requisitos comunes a continuación, puede simplemente usar un código como

<p class="bold red"></p> 
<h2 class="red"></h2> 
<br class="clear" /> 

Simples!

Answer 5

Utilice las pestañas. Lo hace más fácil de ver. También prefiero usar .classname que #id. Ejemplo de una pieza de css de una de mis páginas web:

body { 
       font-family: Arial,Helvetica,sans-serif; 
       font-size: 11px; 
       background-color: #99D9EA; 
      } 

      .lcategorie { 
       background-image: url('http://images.alphenweer.nl/i/gradient-menu-left.png'); 
       background-repeat: no-repeat; 
       padding-left: 2px; 
       text-align: left; 
       color: #FFFF00; 
       font-weight:bold; 
       width:200px; 
       height:20px; 
       display:block; 
       cursor:pointer; 
      } 

      .rcategorie { 
       background-image: url('http://images.alphenweer.nl/i/gradient-menu-right.png'); 
       background-repeat: no-repeat; 
       padding-right: 2px; 
       text-align: right; 
       font-weight:bold; 
       color: #FFFF00; 
       width:200px; 
       height:20px; 
       display:block; 
       cursor:pointer 
      } 

Answer 6

Además de las buenas respuestas anteriores, lo que usted acaba de describir en su pregunta también se llama de otra manera como Learning Curve.

Todos lo solucionamos. Es inevitable, según yo.

El mejor enfoque es probablemente hacer el mejor uso de los vastos recursos disponibles y luego filtrarlos. Que es una habilidad desarrollada solo a través del tiempo.

No creo que haya atajos. Aunque estoy de acuerdo, sería bueno tener una guía que nos ayude a evitar las trampas y los desperdicios de tiempo y contarnos sobre las mejores prácticas.

Pero incluso esos están disponibles gracias a algunos bloggers realmente apasionados y expertos en su campo.

Así que explorar de distancia es lo que sugeriría.

Answer 7

Si tienes la suerte de tener una Mac o un Hackintosh ... entonces recomiendo CSSEDIT (desafortunadamente solo disponible en Mac). Le permitirá desarrollar rápidamente su comprensión de CSS. Me doy cuenta de que esto no responde a tu pregunta, pero si lo intentas, entenderás por qué es tan importante para la curva de aprendizaje. Lamentablemente, nada más en las ventanas se acerca. Uso Windows el 99% del tiempo y cambio a mi mac para CSSEDIT.