1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Configurar warnings de CSSLint en Atom

Tema en 'Herramientas y Utilidades' comenzado por eridamega, 11 de Julio de 2017.

Tags:
  1. eridamega

    eridamega Nuevo Miembro

    Se incorporó:
    10 de Julio de 2017
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Después de ver el tutorial de falconmaster, he optado por usar Atom e instale Linter y Csslint, pero me esta mostrando advertencias molestas como cuando uso un ID o el * como selector, la en Sublime es muy fácil ignorar esos warnings pero no he podido hacerlo en Atom, alguien podria ayudarme he encontrado esto en Stackoverflow pero no comprendo como solucionarlo how-to-ignore-specific-warnings-outputted-by-the-csslint-extension-for-brackets
    Código (Text):
    "csslint.options": {
        "adjoining-classes": false,
        "box-model": false,
        "box-sizing": false,
        "duplicate-background-images": false,
        "ids": false,
        "order-alphabetical": false,
        "qualified-headings": false,
        "unique-headings": false,
        "universal-selector": false
    }
    Sin título.jpg
     
  2. The Boy

    The Boy
    Moderador
    Miembro del Equipo

    Se incorporó:
    2 de Mayo de 2015
    Mensajes:
    394
    Me gusta recibidos:
    146
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Desarrollador web
    Localización:
    España
    Página web:
    ¡Hola @eridamega!

    Para poder ignorar determinadas advertencias debes abrir el archivo de configuración de CSSLint y dentro de:
    PHP:
    "csslint.options": {

    }
    Que es un .json, vas añadiendo las advertencias a ignorar. Para ello debes poner el nombre de la advertencia y ponerla en false. Es decir:
    PHP:
    "csslint.options": {
        "ids": false, // Para ignorar que te lance una advertencia al usar ids #
    }
    Los nombres de la advertencias te las pone entre paréntesis cuando te indica que hay algo erróneo o poco aconsejable.

    ¡Un saludo! y espero que te haya servido :)
     
    A AngelKrak le gusta esto.
  3. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Otro posible error que tienes y que debes de saber es que usar atributos ID en hojas de estilo no es muy recomendado, para ellos existen las clases... Ya que sin embargo los #id tienen mayor prioridad .... por eso te marca un posible error, Los atributos #id son mas recomendado en usar en lado del cliente JAVASCRIPT para poder manipular el dom y aplicar estilos, como te mencione tienen mayor prioridad...

    Has una prueba... en tu id #contenedor agrega una backgound-color: red por ejemplo y posteriormente agrega una clase con el mismo nombre .contendor dentro del mismo elemento que tengas el atributo id y agregues un background-color: blue... y observa el resultado...
    Investiga sobre especificidades CSS
     
  4. The Boy

    The Boy
    Moderador
    Miembro del Equipo

    Se incorporó:
    2 de Mayo de 2015
    Mensajes:
    394
    Me gusta recibidos:
    146
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Desarrollador web
    Localización:
    España
    Página web:
    Hola @Dawud, no sé a qué te refieres al realizar el experimento que has sugerido, me encanta el CSS y si puedo aprender nuevo siempre, estaría muy TOP ;)

    Al no entenderte me refiero a que por mucho que declare una id y una clase con el mismo nombre, al momento de usarlo sobre un elemento en HTML, se "llaman" de distinta forma.
    Por ejemplo
    Código (CSS):
    #container {
      background-color: #555;
    }
    .container {
    background-color: #222;
    }
    Al momento de usarlo:
    HTML:
    <div class="container">
    <div id="container">
       Hola Mundo
    </div>
    </div>
     
    El primero hace uso de la clase .container y el segundo hace uso del identificador único #container. Son dos cosas distintas, y aunque el id #container tenga más "peso" y se le apliquen las propiedades de #container a .container no afecta en absoluto definir las mismas propiedades a ambos con distintos valores, ya que aunque tenga mucho peso, se respeta lo establecido en el CSS.

    --> CodePen por aquí

    Por último, quiero aclarar una cosa importante y se trata de un debate actual entre desarrolladores.
    No es recomendable usar IDs como selectores en CSS, no porque tenga algo que ver con Javascript o cualquier otro lenguaje, si no porque no se puede RECICLAR al igual que una clase, es decir, no se puede volver a usar al tratarse de un elemento único en la página.

    Por el contrario, bajo mi punto de vista, sí que deberíamos usar IDs como selectores en CSS solo en elementos importantes de nuestra página, como por ejemplo, un #wrap para definir el ancho máximo de nuestra web.

    ¡Un saludo! ;)
     
    A AngelKrak le gusta esto.
  5. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    hola @The Boy , que tal, sobre el contenido que menciones en el mensaje anterior respecto la imagen que comparte el compañero del tema es si observaste en el css marca un punto naranja en donde posteriormente el csslint en atom da a conocer que utilizar un selector #ID definido en css no es muy recomendable aunque se puede utilizar... Pero o_Oo_O hay que conocer un id tiene prioridad mas que un selecto CLASS en un hoja de estilo...
    Tomando referencia al estilo que definiste sobre container tanto id como class.... lo implementaré en el siguiente elemento, ya que el elemento que mencionaste no aplica a lo que mencione... Sobre eso mencione un tema especificidades CSS ver aquí en donde menciono que valor tiene el selector, id, class, important y inline....

    Continuando.... :rolleyes::rolleyes:

    HTML:
    <div class=container id=container>
       <h1> Hola mundo..!! </h1>
    </div>
    De acuerdo a la referencia css que menciones describe dos background para cada selector... Ahora la jugada es si se define un id #container aplicará el color de fondo #555 pero al colocar otro nombre idéntico como referencia a una clase después del #container dime que color va a pintar, así es pintara el mismo color #555 pero tenemos en cuenta que css va en forma de cascada y puedes pensar tal vez se debió de aplicado el #222 pero no...
    Ahora si colocas dentro de la clase container en la propiedad definida un !important .. ¿Que color crees que va a tener el DIV? claro la respuesta será muy simple el #id no lo será si no el color de fondo será #222 de la clase container y si te preguntas porque es que la propiedad !important! tiene mas prioridad que un selector id o clase o un inline... Puede intentar hacer la prueba agrega un !important y por medio de un js agrega un nuevo color de fondo al elemento div que contiene los selectores y verá que no aplicará ningún cambio de color...

    Código (CSS):
    #container {
      background-color: #555;
    }
    .container {
    background-color: #222 !important;
    Si eliminas el important y tienes el nuevo color definido a través de JS el nuevo color será 0ddccc

    Código (Javascript):
    document.getElementById("container").style.backgroundColor = "#0ddccc";



    Así es no es recomendable pero en cuestión se suele utilizar al menos para poder posicionar un elemento en sí... pero para ello existe !important ...
    Los selectores no se puede reciclar solamente que lo elimine y los agregues ... pero si puedes manipular las propiedades (estilo) que contiene conociendo sus especificidades... Si contiene un !imporntant en tu clase o id en css no puedes definir nuevas propiedades correspondiente al !important ya que contiene un valor mayor y superior que todos en css... hay que saber donde colocarlo y usarlo...

    Podríamos pero no sería recomendable siempre solo como mencionas en elementos imporntantes del sitio...

    Espero poder expresado un poco mejos...
     
  6. The Boy

    The Boy
    Moderador
    Miembro del Equipo

    Se incorporó:
    2 de Mayo de 2015
    Mensajes:
    394
    Me gusta recibidos:
    146
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Desarrollador web
    Localización:
    España
    Página web:
    Yo lo que expreso es que da igual que uses #IDs o no. Es un debate que de momento unos dicen X y otros dicen Y y ninguna de las dos posturas, por el momento, tienen un peso verdadero que argumente definitivamente es por que NO se debería usar o el por que da IGUAL continuar como antes.

    Al reciclaje me refiero a que los puedas usar cuantas veces quieras y cambiarles propiedades según las necesidades de cada página de la web, para eso las CLASS como mencioné antes y no los IDs.
     

Comparte esta página