Jump to content

Оцените написание кода(крохотный кусочек работы)


KamZed
 Share

Recommended Posts

Всем доброго времени суток, пожалуйста посмотрите на код(небольшой кусочек работы) и оцените, хотелось бы услышать что правильно что нет, что можно было бы по другому, как можно детальней и дотошнней, семантика пространство имен и прочее прочее, в общем чем больше критики(желательно конструктивной и обоснованной) тем лучше, я специально выкладываю маленький кусок что бы, было не напряжно  его изучить!

http://codepen.io/Kamzed/pen/rrqJJz

Заранее благодарю всех добрых людей которые согласятся помочь. 

 

Link to comment
Share on other sites

 

2 часа назад, wwt сказал:

потому-что это правило обойдет все ноды в дереве, зачем оно нужно к примеру для параграфов?

И как правильнее будет записать это правило?

Link to comment
Share on other sites

4 минуты назад, alejandro13 сказал:

 

И как правильнее будет записать это правило?

прописать это свойство только тем элементам(классам, тегам и т.д.) которым нужно, это же очевидно.

Link to comment
Share on other sites

1. для 

.index-header {}

не стоит задавать высоту, либо min-height, либо отступами (это элементарная защита от переполнения контентом)

2. зачем лишний блок делать `.upper-header`? Градиент можно сразу к `.index-header` селектору применить.

3. Лишняя обёртка `.index-logo > h1`, можно сразу `h1.index-logo`, а лучше сразу `h1.logo`, а ещё лучше не использовать заголовок первого уровня для логотипа (для СЕО не очень), а делать ссылкой на главную страницу, люди привыкли, что логотип — ссылка на главную, деже на главной (для перезагрузки страницы, например) `a.logo` Наилучший вариант я считаю.

4. Зачем опять лишняя обёртка `div.user-block`? Что мешает делать сразу `a.user-block`?

5. По спеке в форме обязательный атрибут `action` должен быть

6. В форме вместо кнопке добавить `type="submit"` для отправки формы ентером

7. ну и про БЭМ имеет смысл почитать)) 

В целом — норм, молодец!) Продолжай практиковаться и у тебя всё получится.

  • Like 1
Link to comment
Share on other sites

1 час назад, andrey7287 сказал:

И что в этом криминального?

когда мощности компов были не такими как сейчас ходили слухи что это правило тормозило рендеринг страницы.

да и лучше использовать для сброса специально подготовленные нормализаторы стилей

 

Link to comment
Share on other sites

1 час назад, andrey7287 сказал:

И что в этом криминального?

Криминального в этом нет. Вопрос не в криминале, если рассуждать просто то это правило вполне себе правило, а если рассуждать с точки зрения целесообразности то становится очевидно что в таком правиле нет необходимости.

29 минут назад, Николя223 сказал:

когда мощности компов были не такими как сейчас ходили слухи что это правило тормозило рендеринг страницы.

да и лучше использовать для сброса специально подготовленные нормализаторы стилей

 

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

Link to comment
Share on other sites

18 часов назад, Николя223 сказал:

когда мощности компов были не такими как сейчас ходили слухи что это правило тормозило рендеринг страницы.

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

18 часов назад, wwt сказал:

Криминального в этом нет. Вопрос не в криминале, если рассуждать просто то это правило вполне себе правило, а если рассуждать с точки зрения целесообразности то становится очевидно что в таком правиле нет необходимости.

С точки зрения целесообразности я делаю так для того что бы один раз написать и забыть. Не спорю, оно при этом работает в тех местах где в этом нет необходимости, меня этот нюанс совершенно не смущает :) 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy