guide - Convenciones CSS/Modelos de diseño de código

javascript style guide

Question

¿Ha habido algún intento y se ha creado un método formal 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.

Estoy pensando más en las líneas de sangría / espaciado, cuándo usar nuevas líneas, convenciones de nombres, etc.

¿Algunas ideas?

Answer 1

Aquí hay un borrador 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 en una sola pestaña, con la llave de cierre sangrada una pestaña. Para mí es más legible de esta manera, pero definitivamente es una cuestión de opinión / preferencia.

Solía ​​tabular las declaraciones de sangrado de sangría para hacer coincidir mis relaciones padre / hijo html tanto como fuera 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 realmente no tiene ninguna convención prescrita para la estructura del código. Entonces todo se reduce a lo que funciona mejor para ti.

Answer 2

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 que elija la que te queda bien

Answer 3

La fama de Natalie Down de ClearLeft produjo una gran presentación de diapositivas que cubría este tema y más http://natbat.net/2008/Sep/28/css-systems/

Descargue 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.

Answer 4

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 usar todas las clases en minúsculas y los identificadores con guiones bajos para separar palabras ( #page_container por ejemplo). Declaro todos mis estilos de etiqueta 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 comprimo lo más pequeño posible, pero aún legible. Puse todo en una línea con espacio en blanco apropiado. Si tiene Visual Studio, puede especificar este formato y tenerlo formateado automáticamente de esta manera para usted (Establecer el estilo en reglas compactas en 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 el lema de una compañía, quiere #slogan un estilo con un nombre grande de letra roja, el id #slogan lugar de #red_bold .

Aquí hay un ejemplo completo para que tenga 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; }

Answer 5

Los archivos deben modularizarse, para que pueda utilizar @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" 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;} podría extenderse mediante 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 CSS orientado a objetos .

Dentro de los archivos, me gusta ordenar alfabeticamente mis selectores y listas de propiedades. He intentado 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 selectores complejos, enumero cada selector alfabéticamente.

Si no puedo usar Sass por algún motivo, podría imitar su patrón de anidamiento (todavía no estoy seguro si esto funciona 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; }

Desafortunadamente, puede buscar el margen de p y no darse cuenta de que es parte de la 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 que escapan a mi control. Me encantaría escuchar sugerencias sobre cómo mejorar este método :)