1. JavaScript / Говнокод #25594

    +5

    1. 1
    2. 2
    3. 3
    #vCardRoom > div.v-card__text > div > div > form > div > div.flex.xs12 > div > div > div.v-text-field__details > div > div > div {
        font-size: 16px;
    }

    Запостил: anuxa, 07 Мая 2019

    Комментарии (37) RSS

    • А потом понадобилось где-то вложить промежуточный слой, и вся вёрстка поехала...
      Ответить
      • Это вряд ли, ведь div > div может быть свёрнут до div. К тому же Shadow DOM API существует.
        Ответить
        • не может быть свернут

          <div>
          чижык
          <div><div>пыжык</div></div>
          </div>


          спрячь пыжика
          Ответить
          • Так добавьте атрибут hidden!

            Я имел в виду, что если не верстать лишних вложенных элементов, то и не придётся писать div > div.

            Вот самое радикальное решение вашей проблемы...
            чижык
            пыжык
            <style>
            	body {
            		white-space: pre;
            		color: transparent;
            	}
            	
            	::first-line {
            		color: initial;
            	}
            </style>
            Ответить
          • Лучше как-то так...
            <section>
                <h1>чижик</h1>
                <p>пыжик</p>
            </section>
            А не бездумная лепка из div, которая достойна только сайта govnokod.ru
            Ответить
            • Ого, вы все еще верите в семантичность?
              Романтик из середины нулевых?

              Спешу вас расстроить: современный дерьмосайт выглядит вот так:
              <div class="col4">
                 <div><div class="chizhik">чижик</div>
                 <div><i class="big_red_button"></i></div>
              </div>
              Ответить
              • А что там расстраиваться — на то оно и экскрементально, раз это всё руками пришлось набивать! Я, например, лучше буду делать сайт при помощи React и JSX, хотя бы видно где там, например, <ProductCard>, а не куча сложноуправляемых div-ов. К тому есть Custom Elements API. Да и писать явно в коде элементы, которые отвечают за внешний вид — вредить самому себе!

                На семантичности более/менее завязаны современные фреймворки, библиотеки, API, вы получаете сразу готовые элементы, компоненты.

                И правда, кто будет с нуля разрабатывать плеер, чтобы подключить видео с YouTube?

                P. S. Ваш <div><i class="big_red_button"></i></div> не поддерживает a11y, почему не начать с <button class="big-red"></button>?
                Ответить
                • Ну вот открыл я сайт реакта
                  <div class="css-13azwyo"><div class="css-tctv7l"><h1 class="css-159p4b7">React</h1><p class="css-1s44ra">A JavaScript library for building user interfaces</p><div class="css-v4xx2e css-1k80xq8"><div class="css-1ezwgyu"><a class="css-1053yfl" href="/docs/getting-started.html">Get Started</a></div><div class="css-1ezwgyu"><a class="css-13foh4g" href="/tutorial/tutorial.html">Take the Tutorial<svg height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.53657 8.69699" class="css-b7q1rs"><path d="
                          M.18254,8.697a.18149.18149,0,0,1-.12886-.31034L4.09723,4.34126.05369.29954a.18149.18149,
                          0,0,1,.2559-.2559L4.4838,4.21785a.18149.18149,0,0,1,0,.2559L.30958,8.648A.18149.18149,
                          0,0,1,.18254,8.697Z
                        " fill="currentColor"></path></svg></a></div></div></div></div>

                  расскажите меще про a11y и семантику
                  Ответить
                  • А с чего вы решили, что это исходный код?

                    Это результат применения React server-side rendering, а исходный код React client-side rendering вы можете посмотреть в Chrome DevTools (там есть source code mapping)

                    A c a11y там, похоже, OK.

                    P. S. Также в DevTools посмотрите вкладку React, если у вас установлено расширение React Developer Tools!
                    Ответить
                    • Слушайте, что вы мне ваньку валяете?
                      Вот пример бутстрапа с реактом
                      https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121

                      return (
                            <div className="d-flex flex-wrap justify-content-center position-absolute w-100 h-100 align-items-center align-content-center">
                            
                              <span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{ theme || 'Default' }</span>
                              
                              <div className="btn-group">
                              
                                <button type="button" className={`btn btn-${themeClass} btn-lg`}>{ theme || 'Choose' } Theme</button>
                                
                                <button type="button" className={`b


                      в чем тут семантика? В классе "w-100 text-center"?
                      Ответить
                      • > className

                        Какой бароп )))
                        Ответить
                        • Это реакт
                          Ответить
                          • Так в чём проблема? Вы сами можете решать, как вам писать код! Мне, например, не нравится эта цепочка из классов Bootstrap, я бы описал эти стили в отдельном файле.

                            Я думаю, что код пишут хотя бы один раз, а читают много раз, так что он должен быть читаемым.

                            Насчёт семантики — 15 лет назад было очень популярно использовать неумеренно и неправильным способом элемент <table>. Однако сегодня ситуация намного улучшилась!

                            В спецификации HTML5 сказано, что нет никаких ограничений на имена, которые вы можете использовать в атрибуте класса, но рекомендуется использовать значения, которые описывают сущность/природу содержимого, а не значения, которые описывают желаемое представление контента. (https://www.w3.org/TR/html52/dom.html#element-attrdef-global-class)

                            Т. е. в том примере с Bootstrap лучше так не делать, хотя можно. Например, лучше <div class="theme-switcher"></div>

                            Также настоятельно рекомендуется рассматривать элемент <div> как крайнюю меру, когда никакой другой элемент не подходит. Использование более подходящих элементов вместо элемента <div> обеспечивает лучшее a11y и код, который легче поддерживать. (https://www.w3.org/TR/html52/grouping-content.html#the-div-element)

                            В React с className всё в порядке, имена свойств идут такие же, как у класса Element, у класса HTMLElement и у его других наследников.
                            Ответить
                            • >Так в чём проблема?
                              В том, что так пишут. Все и всегда. К сожалению.

                              >15 лет назад было очень популярно использовать неумеренно и неправильным способом элемент <table>.

                              Потому что во времена IE 6.0 это был единственный способ более-ли-менее четко расположить элемент на странице

                              > Однако сегодня ситуация намного улучшилась!
                              ахахха, ну да, ну да.
                              Было:
                              <table>
                              <tr>
                                <td width="20%">..</td>
                                <td>..</td>
                              </tr>
                              </table>


                              стало

                              <div class="container">
                              <div class="row">
                                <div class="col2">..</div>
                                <div class="col">..</div>
                              </div>
                              </div>


                              >о рекомендуется использовать значения, которые описывают сущность

                              Это все было сказано и в xhtml еще.
                              Но кто так делал?

                              Мне нравится семантическая верстка, я считаю что никаких "red_label" и "col2" в коде быть не должно.

                              Бекенд должен выдавать чисто логическую разметку (например серилизацию view object) а уже клиент-сайдер должен крутить ее с помощью селекторов CSS, а если уж ему так надо поменять сам код то пусть меняет его каким-нить xsl, но за исключением меня в мире есть примено 0 человек, которые думают так же.

                              Любой клиент-сайдер обязательно хреначит "red_label".
                              Хотя у него есть LESS или SASS и он может делать даже имена классов семантичными.
                              Ответить
                              • Ты какой-то странный, гость. Людям удобнее поменять CSS и не ебаться с тегами. Всё равно ты к каждому элементу (не div-y) будешь накручивать свои классы.

                                И не пизди, элементы p, span, section, nav часто используются по назначению.
                                Ответить
                                • Вот "ul" да, часто используют для меню, и ебутся с убиранием "•".
                                  Ответить
                                  • убирать буллет проще простого
                                    Ответить
                                  • «•» убрать можно. Там ещё проблема в браузерозависимой фигне вроде всяких отступов, которые тоже нужно убирать.

                                    А с «dl» вообще жопа.
                                    Ответить
                                    • отступы нужно ресетить
                                      всегда
                                      у всего
                                      Ответить
                                • ахаха и какое же назначение у span?
                                  Ответить
                                  • Например, задание фона текста.
                                    Ответить
                                    • это такая семантика, да?

                                      какие же вы тупые пиздуны

                                      span это инлайн елемент без семантики
                                      div -- блочный с семантикой
                                      Ответить
                                      • Больной ублюдок!
                                        Ответить
                                      • Что span без семантики, что div без семантики. Это такие элементы, шо я е

                                        Разница между ними в том, что div по умолчанию display:block, а span по умолчанию display:inline. Кстати, элемента с умолчанием display:inline-block не существует, для такого можно использовать хоть div, хоть span.
                                        Ответить
                                        • Верно.

                                          В начале нулевых люди хотели всё делать правильно, и считали что HTML должен содержать модель. Тогда было много семантических тагов в планах.

                                          Потом пришли тупые жаваскриптеры-смузиёбы и засрали всё своим div class="col2 red_label"

                                          о том и спич же
                                          Ответить
                                          • Я вообще против "ХТМЛ", пусть браузеры обрабатывают бинарный формат, а разработчик пусть пишет на чём хочет.
                                            Ответить
                                          • О, боже! Что ещё натворили смузиёбы?
                                            Ответить
              • Вы хотите семантики? Тогда мы идём к вам!
                <style>
                  trololo {
                    display: inline;
                    color: green;
                  }
                </style>
                Именно поэтому я за <trololo>"HTML"</trololo>.
                Ответить
    • Чувак явно не здоров, лиьо у него чувство йумора токое.
      Ответить
    • Это не "Java".
      Ответить
    • мощный селегктор
      Ответить
      • А тут скорей всего было просто в DevTools был выбран элемент, а затем Copy > Copy Selector.
        Ответить

    Добавить комментарий