Оцените код html и css. Можно ли так делать?

Question

Даниил Секретов @DannYLook

Программист

Оцените код html и css. Можно ли так делать?

Хочу узнать ваше мнение о моем коде. Весь сайт написан немного не стандартно, списками, а именно:

<ul class="slider_ul">
      <li class="slider_arrow_one"> < </li>
      <img src="media/photo.jpg" class="slider_img">
      <li class="slider_arrow_two"> > </li>
      <ul class="slider_ul_ul"> 
        <li class="slider_description">Описание Описание Описание Описание Описание Описание ...</li>
        <button class="default_button">Далее</button>
        <li class="slider_ul_ul_text">Рейтинг 4/5</li>
      </ul>
    </ul>

И вроде бы так гораздо быстрее получается писать код с минимальным использованием css. Что получилось из этого блока:

Вес код будет в комментариях (сайт пока не адаптировал).

Не видел, чтобы так кто-то делал, но как по мне интересная штука.

Вопрос задан 28 дек. 2024
240 просмотров

6 комментариев

Подписаться 1 Простой 6 комментариев

Даниил Секретов @DannYLook Автор вопроса

HTML

<body>
  <div class="container">

  <header>

    <div>

      <ul class="header_ul">
        <img src="media/logo.png" class="logo">
        <li class="header_li"><a>Регистрация</a></li>
        <li class="header_li"><a>Личный кабинет</a></li>
        <li class="header_li"><a>О нас</a></li>
        <li class="header_li"><a>Контакты</a></li>
        <li class="header_li"><a>Поиск</a></li>
        <li class="header_li"><a>Наши экскурсии</a></li>
      </ul>

    </div>
  </header>

<main>

  <div>
    
    <ul class="slider_ul">
      <li class="slider_arrow_one"> < </li>
      <img src="media/photo.jpg" class="slider_img">
      <li class="slider_arrow_two"> > </li>
      <ul class="slider_ul_ul"> 
        <li class="slider_description">Описание Описание Описание Описание Описание Описание ...</li>
        <button class="default_button">Далее</button>
        <li class="slider_ul_ul_text">Рейтинг 4/5</li>
      </ul>
    </ul>


    <ul class="registration_ul">
      <ul>
        <form>
          <input type="text" placeholder="Email" class="default_input">
        </form>
        <form class="form_two">
          <input type="text" placeholder="Email" class="default_input">
        </form>
        <ul class="registration_ul_ul">
          <a class="help_pasword">Забыл пароль</a>
          <button class="default_button">Войти</button>
        </ul>
      </ul>


      <ul class="description_ul">
        <li>О нас</li>
        <br/>
        <li>Наш слоган:</li>
        <br/>
        <li>Описание</li>
      </ul>
    </ul>

  </div>
  <div>
    <p class="instructions_p">Наши инструкции</p>
    <ul class="ul_instructions_find">
      <form>
        <input type="text" placeholder="Поис инструкции" class="default_input">
        <button class="default_button ul_instructions_find_button">Поиск</button>
      </form>
    </ul>

    <div>

      <ul class="card_ul">
        <div class="card_fon">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>
        <div class="card_fon card_left">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>

        <div class="card_fon card_left">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>
        
      </ul>


      <ul class="card_ul_two">
        <div class="card_fon">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>
        <div class="card_fon card_left">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>

        <div class="card_fon card_left">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>
        
      </ul>

      <div class="card_fon_last">
        <p class="card_text_name">Название</p>
        <img src="media/photo.jpg" class="card_img">

        <p class="card_text_description">Описание ..................................
          <br/>...........................................................</p>
        <p class="card_text_description_two">Продолжительность 7 дней; 
          <br>
          Кол-во бронирований: 10; 
          <br>
          Рейтинг 3/5
        </p>


        <button class="card_button">Забрноировать</button> 

      </div>
    </div>


    <div>
      
        <p class="reviews_text_main">Отзывы клиентов</p>
        <div class="reviews_card_fon">
                <img src="media/face.jpg" class="reviews_photo">
                <p class="reviews_card_name">Даниил</p>
                <p class="reviews_card_description">Описание, описание, описание, описание, описание, описание, описание...</p>
                <ul class="reviews_ul-ul">
                  <p class="slider_arrow_three"><</p>
                  <p class="slider_arrow_four">></p>
                </ul>
                <p class="reviews_card_link">Ссылка на описание экскурсии<p/>
                <p class="reviews_card_date">10.11.2024<p/>
        </div>
        
        <ul class="send_ul">
          <p class="send_text_main">Новости сервиса</p>
          <form>
            <input type="text" placeholder="Поис инструкции" class="default_input">
            <ul class="send_ul_ul">
              <button class="send_button"></button>
              <p>Согласие на оброботку персональных данных</p>
            </ul>
            <button class="default_button">Подписаться</button>
          </form>
        </ul>

    </div>
  </div>
  </main>
</div>
<footer class="footer_fon">
  <ul class="footer_ul">
    <p class="footer_text_one">Главная</></p>
    <p class="footer_text_Two">Ригистрация</p>
    <p class="footer_text_Three">Личный кабинет</p>

  </ul>

  <ul class="footer_ul_two">
    <p class="footer_text_one">О нас</></p>
    <p class="footer_text_Two">Контакты</p>
    <p class="footer_text_Three">Поиск</p>
    <p class="footer_text_Four">Наши экскурсии</p>

  </ul>

  <ul class="footer_three">
    <p class="footer_text_one">+7 (353) 123-45-67</></p>
    <p class="footer_text_Two">info@moscow.ru</p>

  </ul>
</footer>
</body>

Написано 28 дек. 2024

Даниил Секретов @DannYLook Автор вопроса

CSS

* {
  background: #1e1a1a;
  color: #ffffff;
  font-size: 20px;
  
}

.container {
  padding: 0 110px
}

.logo{
  width: 90px;
  height: 50px;
  margin-right: 35px;
  margin-top: -15px;

}

.header_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 35px;
}
.header_li {
  margin-right: 45px;
  cursor: pointer;
}

.slider_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 60px;
}

.slider_img {
  max-width: 680px;
  max-height: 350px;
  margin-left: 20px;
}
.slider_arrow_one {
  font-size: 70px;
  margin-top: 120px;
  cursor: pointer;
}

.slider_arrow_two {
  font-size: 70px;
  margin-left: 20px;
  margin-top: 120px;
  cursor: pointer;
}

.slider_ul_ul {
  list-style: none;
  margin-top: 80px;
}
.default_button {
  border: none;
  text-decoration: none;
  background: #0B63F6;
  width: 150px;
  height: 45px;
  cursor: pointer;
}
.slider_description {
  padding-bottom: 45px; /* оступ вниз */
}

.slider_ul_ul_text{
  color: #fff905;
  margin-top: 50px;
}

.registration_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 60px;
}
.registration_ul_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 15px;
}
.default_input {
  width: 330px;
  height: 55px;
  background-color: #3b3b3f;
  outline: none;
  border: none;
}
.default_input::placeholder {
  color: #676565; /* Цвет текста-заполнителя */
}

.form_two {
  margin-top: 15px;
}

.help_pasword {
  font-size: 13px;
  color: #0300ff;
  text-decoration: underline;
  margin-top: 10px;
  margin-right: 50px; /* отступ вправо след элимента*/
  cursor: pointer;

}

.description_ul {
  list-style: none;
  margin-left: 350px;
}

.instructions_p {
  text-align: center;
  margin-top: 70px;
  font-size: 30px;
}
.ul_instructions_find {
  list-style: none;
  margin-top: 25px;
}
.ul_instructions_find_button {
  margin-left: 100px;
}

.card_ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    
}
.card_ul_two {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-top: 80px;
}
.card_fon {
  height: 700px;
  width: 330px;
  background-color: #3b3b3f;
  position: relative;
  
}

.card_fon_last{
  height: 700px;
  width: 330px;
  background-color: #3b3b3f;
  position: relative;
  margin-top: 80px;
  margin-left: 390px;
}

.card_text_name {
  position: absolute;
  background-color: #3b3b3f;
  left: 120px;
  margin-top: 11px;
  font-size: 25px;
}
.card_img {
  width: 300px;
  height: 200px;
  margin-top: 50px;
  margin-left: 15px;
}

.card_text_description {
  background-color: #3b3b3f;
  margin-left: 15px; 
}


.card_text_description_two {
  background-color: #3b3b3f;
  margin-left: 15px; 
  margin-top: 160px;
}

.card_button {
  border: none;
  text-decoration: none;
  background: #0B63F6;
  width: 330px;
  height: 60px;
  cursor: pointer;
  margin-top: 75px;
  text-align: center;
}
.card_left {
  margin-left: 60px;

}

.reviews_text_main {
  font-size: 25px;
  margin-top: 120px;
  margin-left: 80px;
}
.reviews_card_fon{
  height: 560px;
  width: 320px;
  background-color: #3b3b3f;
  position: relative;
}
.reviews_photo {
  width: 100px;
  height: 100px;
  margin-top: 25px;
  margin-left: 114px;
  
}

.reviews_card_name{
  background-color: #3b3b3f;
  text-align: center;
}

.reviews_card_description{
  background-color: #3b3b3f;
  text-align: center;
  margin-top: 55px;
}
.reviews_card_link {
  background-color: #3b3b3f;
  font-size: 16px;
  color: #0e2af3;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 20px;
  margin-top: 0px;
}
.reviews_card_date{
  background-color: #3b3b3f;
  font-size: 18px;
  margin-left: 20px;
  margin-top: -5px;
}

.reviews_ul-ul{ 
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #3b3b3f;
}
.slider_arrow_three {
  font-size: 65px;
  margin-top: 30px;
  margin-left: -60px;
  cursor: pointer;
}

.slider_arrow_four {
  font-size: 65px;
  margin-left: 365px;
  margin-top: 30px;
  cursor: pointer;
}
.send_text_main{
  font-size: 25px;
}
.send_ul_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.send_button{
  width: 25px;
  height: 25px;
  background-color: #3b3b3f;
  cursor: pointer;
  border: none;
  text-decoration: none;
  margin-top: 18px;
  margin-right: 10px;
}
.send_ul{
  margin-left: 600px;
  margin-top: -635px;
}
.footer_fon{
  width: 100%;
  height: 300px;
  background-color: #3b3b3f;
  margin-top: 570px;
  position: relative;

}

.footer_text_one{
  position: absolute;
  background-color: #3b3b3f;
  font-size: 25px;
  margin-top: 40px;

}
.footer_text_Two{
  position: absolute;
  background-color: #3b3b3f;
  font-size: 25px;
  margin-top: 80px;
}
.footer_text_Three{
  position: absolute;
  background-color: #3b3b3f;
  font-size: 25px;
  margin-top: 120px;
}
.footer_ul {
  cursor: pointer;
}
.footer_ul_two {
  margin-left: 290px;
  cursor: pointer;
}

.footer_text_Four{
  position: absolute;
  background-color: #3b3b3f;
  font-size: 25px;
  margin-top: 160px;
}
.footer_three{
  margin-left: 800px;
  cursor: pointer;
}

Написано 28 дек. 2024

Сергей delphinpro @delphinpro Куратор тега Вёрстка

Прямым потомком UL/OL может быть только LI

Написано 28 дек. 2024
Wispik @Wispik

но как по мне интересная штука.

И в чем именно интересность этой штуки?

Написано 29 дек. 2024
Ankhena @Ankhena Куратор тега Вёрстка

Оцените код html и css.

Любое число меньше нуля.

Можно ли так делать?

Можно, если никому не показывать.
Вообще, нет, нельзя.
В этом коде нарушены правила вложенности тегов (валидность) и семантика.

Не видел, чтобы так кто-то делал, но как по мне интересная штука.

Хорошо, что не видели. Разумные люди такое никому не показывают.

И вроде бы так гораздо быстрее получается писать код с минимальным использованием css.

Это очень странное заявление.
Быстрее писать стили можно используя широкий монитор (или два) и emmet.

Если писать нормально, то ваш код можно существенно сократить.
И заметно уменьшить количество ошибок.

Написано 29 дек. 2024
Виталий Першин @Get-Web

Списки прошлый век, сейчас таблицами верстают

Написано 29 дек. 2024

Решения вопроса 3

4 комментария

Сергей delphinpro @delphinpro Куратор тега Вёрстка

это кривая экономия на спичках.

А в чём экономия? Я что-то не уловил.

Написано 28 дек. 2024
Алексей Уколов @alexey-m-ukolov

Сергей delphinpro, автор утверждает, что у него так быстрее получается писать CSS. Так-то, конечно, никакой экономии нет.

Написано 28 дек. 2024
Сергей delphinpro @delphinpro Куратор тега Вёрстка

Алексей Уколов, =) тогда можно порекомендовать ему использовать однобуквенные теги, например <i>. Все равно на семантику и валидность положен болт.

Написано 28 дек. 2024
Aetae @Aetae

Сергей delphinpro, можно камтомный тег x использовать. Не менее семантично чем div и на буквах экономия:)

Написано 29 дек. 2024

Комментировать

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Вёрстка

+1 ещё

Простой
Как избавиться от панели навигации в браузере при добавлении закладки на экран домой?
- 1 подписчик
- 24 февр.
- 67 просмотров
1

ответ
Вёрстка

Простой
Как добавить оценку товара в карточке товара?
- 1 подписчик
- 22 февр.
- 46 просмотров
1

ответ
Вёрстка

Простой
Как сверстать такую кнопку?
- 1 подписчик
- 13 февр.
- 161 просмотр
0

ответов
JavaScript

+3 ещё

Простой
Вложенный слайдер Swiper.js с эскизами?
- 1 подписчик
- 03 февр.
- 104 просмотра
0

ответов
JavaScript

+3 ещё

Средний
Как можно такое сделать?
- 2 подписчика
- 02 февр.
- 8309 просмотров
2

ответа
Code review

Простой
Как вам калькулятор новичка?
- 1 подписчик
- 30 янв.
- 136 просмотров
1

ответ
Вёрстка

Простой
Как проверить правильно ли реализовал прогер на сайте border-radius?
- 1 подписчик
- 28 янв.
- 116 просмотров
1

ответ
HTML

+2 ещё

Средний
Как сверстать блок с прорезями, в которых видно видео, которое играет на заднем плане?
- 1 подписчик
- 26 янв.
- 1449 просмотров
1

ответ
Вёрстка

+1 ещё

Средний
Можно ли сделать разные favicon для вкладки браузера и показа в поиске yandex/google?
- 1 подписчик
- 25 янв.
- 67 просмотров
1

ответ
SQL

+1 ещё

Простой
Более оптимальный запрос sql?
- 1 подписчик
- 23 янв.
- 259 просмотров
2

ответа
Показать ещё Загружается…

Frontend-разработчик (Vanilla JavaScript, full-time)

Dalyoko

от 1 000 до 1 500 $

Frontend developer

Pixel Point

До 4 500 $

Lead Frontend Developer (удаленно)

Apphud

от 4 000 до 6 000 $

Прямым потомком UL/OL может быть только LI
но как по мне интересная штука.

И в чем именно интересность этой штуки?
Оцените код html и css.

Любое число меньше нуля.

Можно ли так делать?

Можно, если никому не показывать.
Вообще, нет, нельзя.
В этом коде нарушены правила вложенности тегов (валидность) и семантика.

Не видел, чтобы так кто-то делал, но как по мне интересная штука.

Хорошо, что не видели. Разумные люди такое никому не показывают.

И вроде бы так гораздо быстрее получается писать код с минимальным использованием css.

Это очень странное заявление.
Быстрее писать стили можно используя широкий монитор (или два) и emmet.

Если писать нормально, то ваш код можно существенно сократить.
И заметно уменьшить количество ошибок.
Списки прошлый век, сейчас таблицами верстают

Answer 1 · 2024-12-28 19:12:02

Ну вы, по-сути, в некоторых местах вместо дивов использовали зачем-то списки и сделали разметку не только невалидной, но и семантически неправильной.
С этим кодом не смогут работать другие разработчики, да и вы потом замучаетесь что-то менять.
Так делать не нужно, это кривая экономия на спичках.

Answer 2 · 2024-12-28 19:26:37

для проверки html можешь использовать https://validator.w3.org/
а для css https://jigsaw.w3.org/css-validator/#validate_by_u... (лично не использовал)

Answer 3 · 2024-12-29 07:00:25

У каждого тега в HTML есть свое назначение. У некоторых есть строгая семантика среди них как раз ul ol li. Этими тегами оформляются списки. Список ссылок может быть навигацией по сайту, тогда ОК, но они должны быть внутри семантического тега nav. В некоторых случая слайдер может быть списком картинок, если это оправдано с точки зрения смысла. В общем почитайте доку по семантическим и не семантическим тегам HTML. Это действительно важная тема, от этого зависит то, как видят вашу страницу поисковые роботы.

Answer 4 · 2024-12-28 19:16:26

Так лучше не писать. Как по мне, такой код выглядит не очень красиво и в тегах списков не должно быть ничего кроме тегов элементов списка. Можно сделать например так:

<div class="slider">
    <div class="slider-left">
      <button class="arrow-left">&lt;</button>
      <img class="slider-image" src="media/photo.jpg" alt="">
      <button class="arrow-right>&gt;</button>
    </div>
    <div class="slider-right">
      <p class="slider-description">Описание Описание Описание Описание Описание Описание ...</p>
      <button class="slider-button">Далее</button>
      <p class="slider-text">Рейтинг 4/5</p>
    </div>
  </div>

Оцените код html и css. Можно ли так делать?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт