CSS Poster: esquema de CSS

ByLuis

CSS Poster es una aplicación que dado un fichero CSS nos devuelve un gráfico con todos los estilos y las relaciones que hay entre ellos.
cssposter.png
El gráfico muestra un árbol, empezando por el logo del servicio, del que cuelgan los distintos estilos y entre estos, sus afectados. Por ejemplo, si tenemos la clase opcion, los párrafos que cuelgan de opcion (opcion p) estarán conectados entre sí, con relación padre-hijo.
Una aplicación que nos puede ser muy interesante para tener un esquema de nuestros estilos. La única pega que encuentro es que el asterísco (*), o incluso el body no aparecen como nodos padre, quizás sea pedir demasiado.
CSS Poster
Vía / X-WEB

Similar Posts

Formatear el código como en Sentido Web

ByLuis

Para aquellos que les guste como formateamos los comentarios en Sentido Web, vamos a explicar el código creado por Choan:

El proceso que sigue es el siguiente:

  • Obtener todos los elementos pre.
  • Para cada pre leer el primer elemento code que tenga.
  • Obtenemos el texto que contiene.
  • Dividimos el texto en líneas.
  • Por cada línea comprobamos si hay algun tipo de comentario, si hay comentario lo separamos en dos partes para luego darle distintos estilos, diferenciando así el formato del comentario.
  • Nos creamos un elemento ol, y en cada li insertamos una línea obtenida anteriormente.
  • Sustituimos el elemento pre por el ol.

Read More “Formatear el código como en Sentido Web”

Uso excesivo de capas y estilos en CSS

ByLuis

Un buen artículo en el que nos comenta sobre el uso excesivo de capas y de clases. Sobre todo de DIVs, muchas veces se encierra en una capa unas etiquetas para darles formato cuando se puede evitar la capa contenedora por tener solamente un elemento hijo en su interior:

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>

Se puede sustituir por:

<h1>My site name</h1>

con estos estilos

h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}

¿Por qué evitar estos usos incorrectos?

  • No es semántico: solo están puestos allí para maquetar.
  • No es bueno para SEO: los buscadores hacen uso de las etiquetas de cabecera para obtener datos significativos.
  • Sobran

El error sobre el uso excesivo de clases es cuando en vez de usar estilos anidados, repetimos el estilo en varias etiquetas:

<div id="menu">

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

</div>


CSS Diseases: Divitis & Classitis


Vía / CSS Globe

Añadir estilos y scripts a la administración de plugins en WordPress

ByLuis

Cuando estamos desarrollando un plugin para WordPress y queremos que la administración del plugin tenga estilos y scripts propios, ya sea para darle cierta interactividad o diseño, o bien podremos incluir los estilos o librerías a pelo en la página del plugin, o bien podremos hacer que WordPress añada lo estilos y los scripts en el head del HTML. Para realizar esto, deberemos utilizar las acciones admin_print_styles y admin_print_scripts:

add_action('admin_print_styles', 'incluir_css');
add_action('admin_print_scripts', 'incluir_script');

function incluir_css() {
  echo '';
}

function incluir_script() {
  echo '';
}

Así de sencillo.

Consejos para estructuras tus CSS

ByLuis

Buenos consejos para realizar tus estilos CSS bien estructurados.

  • Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
  • Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
  • Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
  • Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
  • Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, …)
  • Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

Write a well structured CSS file without becoming crazy

Vía / CSS Globe

|

CSS grid: filas con misma altura

ByLuis

Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.

Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:

.grid {
  margin: 0 auto;
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  grid-auto-rows: auto;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid--same-height .cell {
  position: relative;
}
.grid--same-height .cell::before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.grid--same-height .content {
  height: 100%;
  position: absolute;
  margin-top: -100%;
}

Teniendo en cuenta que el HTML sería:

<div id="grid" class="grid">
  <div class="cell">
    <div class="content">
      <img src="https://picsum.photos/500/500"/>
    </div>
  </div>
  ...
</div>

Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.

Podéis ver un ejemplo en este pen