ЙажаСценарий / Говнокод #25594 Ссылка на оригинал

0

  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 anuxa, (Updated )

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

  • ava nemyx # Ссылка на оригинал 0

    А потом понадобилось где-то вложить промежуточный слой, и вся вёрстка поехала...
    Ответить

    • ava unicorn # Ссылка на оригинал 0 ⇈

      Это вряд ли, ведь div > div может быть свёрнут до div. К тому же Shadow DOM API существует.
      Ответить

      • ava guest # 0 ⇈

        не может быть свернут

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


        спрячь пыжика
        Ответить

        • ava unicorn # Ссылка на оригинал 0 ⇈

          Так добавьте атрибут hidden!

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

          Вот самое радикальное решение вашей проблемы... 
          чижык
пыжык
<style>
	body {
		white-space: pre;
		color: transparent;
	}
	
	::first-line {
		color: initial;
	}
</style>
          Ответить

        • ava unicorn # Ссылка на оригинал 0 ⇈

          Лучше как-то так...
          <section>
    <h1>чижик</h1>
    <p>пыжик</p>
</section>
          А не бездумная лепка из div, которая достойна только сайта govnokod.ru
          Ответить

          • ava guest # 0 ⇈

            Ого, вы все еще верите в семантичность?
            Романтик из середины нулевых?

            Спешу вас расстроить: современный дерьмосайт выглядит вот так:
            <div class="col4">
   <div><div class="chizhik">чижик</div>
   <div><i class="big_red_button"></i></div>
</div>
            Ответить

            • ava unicorn # Ссылка на оригинал 0 ⇈

              А что там расстраиваться — на то оно и экскрементально, раз это всё руками пришлось набивать! Я, например, лучше буду делать сайт при помощи 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>?
              Ответить

              • ava guest # 0 ⇈

                Ну вот открыл я сайт реакта
                <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 и семантику
                Ответить

                • ava unicorn # Ссылка на оригинал 0 ⇈

                  А с чего вы решили, что это исходный код?

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

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

                  P. S. Также в DevTools посмотрите вкладку React, если у вас установлено расширение React Developer Tools!
                  Ответить

                  • ava guest # 0 ⇈

                    Слушайте, что вы мне ваньку валяете?
                    Вот пример бутстрапа с реактом
                    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"?
                    Ответить

                        • ava unicorn # Ссылка на оригинал 0 ⇈

                          Так в чём проблема? Вы сами можете решать, как вам писать код! Мне, например, не нравится эта цепочка из классов 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 и у его других наследников.
                          Ответить

                          • ava guest # 0 ⇈

                            >Так в чём проблема?
                            В том, что так пишут. Все и всегда. К сожалению.

                            >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 и он может делать даже имена классов семантичными.
                            Ответить

                            • ava guest # 0 ⇈

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

                              И не пизди, элементы p, span, section, nav часто используются по назначению.
                              Ответить

                              • ava guest # 0 ⇈

                                Вот "ul" да, часто используют для меню, и ебутся с убиранием "•".
                                Ответить

                                • ava guest # 0 ⇈

                                  убирать буллет проще простого
                                  Ответить

                                • ava nemyx # Ссылка на оригинал 0 ⇈

                                  «•» убрать можно. Там ещё проблема в браузерозависимой фигне вроде всяких отступов, которые тоже нужно убирать.

                                  А с «dl» вообще жопа.
                                  Ответить

                                  • ava guest # 0 ⇈

                                    отступы нужно ресетить
                                    всегда
                                    у всего
                                    Ответить

                              • ava guest # 0 ⇈

                                ахаха и какое же назначение у span?
                                Ответить

                                  • ava guest # 0 ⇈

                                    это такая семантика, да?

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

                                    span это инлайн елемент без семантики
                                    div -- блочный с семантикой
                                    Ответить

                                    • ava nemyx # Ссылка на оригинал 0 ⇈

                                      Что span без семантики, что div без семантики. Это такие элементы, шо я е

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

                                      • ava guest # 0 ⇈

                                        Верно.

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

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

                                        о том и спич же
                                        Ответить

            • ava Be6_nemyx # Ссылка на оригинал 0 ⇈

              Вы хотите семантики? Тогда мы идём к вам!
              <style>
  trololo {
    display: inline;
    color: green;
  }
</style>
Именно поэтому я за <trololo>"HTML"</trololo>.
              Ответить

  • ava Be6_nemyx # Ссылка на оригинал 0

    Чувак явно не здоров, лиьо у него чувство йумора токое.
    Ответить

    • ava unicorn # Ссылка на оригинал 0 ⇈

      А тут скорей всего было просто в DevTools был выбран элемент, а затем Copy > Copy Selector.
      Ответить

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

Семь раз отмерь — один отрежь, guest!

    А не использовать ли нам bbcode?

    ↑
    8
    ↓