¿Se ha intentado alguna vez crear un método formalizado para organizar el código CSS? Antes de ir y hacer mi propia estrategia para mantener las cosas legibles, me pregunto qué más hay por ahí. Google no me ha ayudado mucho, ya que no estoy seguro de qué términos buscar.Convenciones CSS/Modelos de diseño de código
estoy pensando más en la línea de sangría/separación, cuándo utilizar nuevas líneas, las convenciones de nomenclatura, etc.
¿Alguna idea?
Natalie abajo de la fama Clearleft produjo un gran presentación de diapositivas que cubren este tema y más http://natbat.net/2008/Sep/28/css-systems/
Descargar el PDF ya que incluye mucha más información que la presentación de diapositivas. Lo recomendaría a los desarrolladores de CSS de todos los niveles de habilidad.
Bueno, yo personalmente no conozco ninguna convención per se, pero sé que hay muchas recomendaciones que son realmente buenas de seguir, pero básicamente depende de cómo quiera implementar su CSS para usted. elige el que más te convenga.
Todo esto es muy subjetivo según los debates de formato de código habituales y no conozco ninguna convención formalizada.
El método que he elegido es utilizar todas las clases en minúsculas y los identificadores con guiones bajos que separan las palabras (#page_container por ejemplo). Declaro todos mis etiqueta estilos primero (html, body, ul, etc.), luego todas las clases y los identificadores, ordenados alfabéticamente. Además, todos los estilos definidos en cada clase, identificación o etiqueta se definen alfabéticamente también. El uso de esta convención hace que sea más fácil rastrear un estilo en particular.
Para el formateo, siempre lo comprime lo más pequeño posible, pero todavía legible. Puse todo en una línea con espacio en blanco apropiado. Si tiene Visual Studio, puede especificar este formato y hacer que se formatee automáticamente de esta manera para usted (Establecer estilo en Reglas compactas bajo Herramientas, Opciones, Editor de texto, CSS, Formato).
Las convenciones de nomenclatura son extremadamente subjetivas aquí, pero lo que hay que tener en cuenta es nombrar sus elementos como su propósito previsto, no su significado estilizado. Por ejemplo, si tiene un lema de empresa que desea diseñar en un nombre de fuente grande y rojo, identifique #slogan en lugar de #red_bold.
Aquí hay un ejemplo completo para darle una idea:
body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em; margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }
Para no insultar su estilo de codificación, funciona para usted, que es lo principal - pero siempre he odiado el estilo todo en uno. Encuentro realmente ilegible. Existe una convención en la programación de que una línea de código debería hacer una cosa, para que las cosas sean legibles. ¿Cuál es el pensamiento detrás del estilo todo en uno? –
@Paul D. Waite Tener todos los estilos en una sola línea permite un tamaño de archivo más pequeño pero aún lo suficientemente legible para trabajar cuando sea necesario. Idealmente, tendría algún proceso de compilación que lo comprimiera aún más en la producción, pero este método es un buen equilibrio entre los dos métodos (totalmente comprimido frente a una propiedad de estilo por línea). – cowgod
Hombre oh hombre, sí, proceso de construcción. Las computadoras están ahí para que los humanos hagan menos trabajo, no más. YUI Compressor hace que sus archivos no comprimidos sean lo más pequeños posible, y la compresión gzip (que probablemente ya esté haciendo su servidor) es, de por sí, 3 o 4 veces más efectiva que el compresor YUI. Hacer que su código sea menos legible no es la forma correcta de reducir el tamaño de los archivos entregados al usuario final. –
Aquí es un proyecto de cómo ordeno mis propiedades CSS. Sigue más o menos la pauta de hacer posicionamiento y diseño primero, luego tipografía, luego fondos y otras cosas menores. Intento ordenar mis propiedades por la forma en que afectan el modelo de caja tanto como sea razonablemente posible. Sin embargo, mi orden tiende a cambiar un poco. Agradecería cualquier comentario sobre esto.
el {
display:;
float:;
clear:;
visibility:;
position:;
top:;
right:;
bottom:;
left:;
z-index:;
width:;
min-width:;
height:;
min-height:;
overflow:;
margin:;
padding:;
border:;
border-top:;
border-right:;
border-bottom:;
border-left:;
border-width:;
border-top-width:;
border-right-width:;
border-bottom-width:;
border-left-width:;
border-color:;
border-top-color:;
border-right-color:;
border-bottom-color:;
border-left-color:;
border-style:;
border-top-style:;
border-right-style:;
border-bottom-style:;
border-left-style:;
border-collapse:;
border-spacing:;
outline:;
list-style:;
font:;
font-family:;
font-size:;
line-height:;
font-weight:;
text-align:;
text-indent:;
text-transform:;
text-decoration:;
white-space:;
vertical-align:;
color:;
opacity:;
background:;
background-color:;
background-image:;
background-position:;
background-repeat:;
cursor:;
}
personalmente prefiero mantener una propiedad por línea con sangría una pestaña, con la llave de cierre sangría una pestaña. Para mí es más legible de esta manera, pero definitivamente es una cuestión de opinión/preferencia.
Solía etiquetar las declaraciones de indent css para que coincida con mis relaciones padre/hijo html tanto como sea posible, pero ya no hago eso.La función de agrupación de CSSEdit ayuda a reducir en gran medida la tentación de hacerlo.
CSS no tiene realmente ninguna convención prescrita para la estructura del código. Entonces todo se reduce a lo que funciona mejor para ti.
Uso mucho ese orden también, aunque puse 'background-color' y' color' uno al lado del otro, y los puse justo después del relleno. Son divertidos los hábitos en los que te puedes meter. He escuchado que mantener un orden consistente en una hoja de estilos puede ayudar a la compresión gzip, que busca cadenas repetidas. Si tiene los mismos estilos utilizados en diferentes lugares, mantener el orden de la misma significa que se comprimirán mejor con gzip. –
Los archivos deben modularizarse, por lo que puede hacer uso de @import s. Normalmente tengo un archivo base.css para las clases base (como la tipografía y los colores). Dependiendo de la estructura de su sitio, puede ser ventajoso tener también otros "parciales" de CSS para reutilizar a lo largo de las hojas de estilo del usuario. Estas hojas de estilo descendientes pueden ampliar los estilos base con más granularidad según sea necesario (por ejemplo, .warn {color:red;} pueden ampliarse por p.warn {font-style:italic;}, o h1.warn {border:5px solid red;}), que es un gran patrón de diseño para implementar el llamado object-oriented CSS.
Dentro de los archivos, me gusta ordenar alfabeticamente mis selectores y listas de propiedades. He tratado de mantener listas separadas para diferentes tipos de selectores (primero una lista de identificación, luego mi lista de clases y luego mi lista de selectores de elementos), pero he encontrado esto innecesariamente difícil, por lo que tengo todos los selectores en el mismo orden alfabético lista. De esta forma, puedo encontrar rápidamente la raíz de todos los selectores complejos o cualquier estilo dado a un selector simple.
Dentro de los selectores complejos, enumero cada selector alfabéticamente.
Si no puedo usar Sass por alguna razón, puede ser que imitar a su patrón nesting (Todavía estoy seguro si esto está funcionando o no), así:
@import url('/css/base.css');
a {
color:#369;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-decoration: underscore; }
a img {
border: 0; }
blockquote, .nav, p {
margin-bottom: 10px; }
blockquote {
background: #eee;
padding: 10px; }
h1, h2, h3, h4 {
font-family: Georgia, serif; }
h1.warning {
border: 5px solid red; }
.nav a {
font-size: 150%;
padding: 10px; }
.nav li {
display: inline-block; }
p.warning {
font-style: italic; }
p.warning a {
background: #fff;
border-bottom: 2px solid #000;
padding: 5px; }
p.warning .keyword {
text-decoration: underline; }
Por desgracia, es posible busca el margen para p y no te das cuenta de que es parte del blockquote, .nav, p. Este tampoco es un diseño muy "orientado a objetos", pero podría decirse que es mejor que poner cadenas de clases en prácticamente todos los elementos que requieren diseño.
Por lo tanto, este enfoque no es perfecto y no lo libera completamente de tener que buscar en el archivo, pero es el mejor enfoque que he desarrollado cuando no puedo usar herramientas de plantillas CSS por razones fuera de mi control. Me encantaría escuchar sugerencias sobre cómo mejorar este método :)
Me gusta. Natalie esencialmente expuso lo que he estado tratando de lograr durante años. El gran problema es conseguir que los compañeros de trabajo lo acepten ... –
http://clearleft.s3.amazonaws.com/2008/cssSystems_notes_small.pdf –