Доброе Утро
январь 2019.
3597

Делаю сайт. Сделала одну страницу. Чтобы проверить сделанное, изучаю код других сайтов. Почему у них в styles.css есть куча описания классов, которых нет в html? Подробности в комментариях.?

Ответить
Ответить
Комментировать
1
Подписаться
0
4 ответа
Поделиться

Обычно просто указывают в одном файле стили всего сайта с его десятками разных типов страниц. Это удобно потому, что браузер загружает стиль один раз, а после этого уже обращается к кэшу, что ускоряет время генерации страницы.

На счет непонятности, тут два подхода: во-первых, все приходит с опытом, меня тоже ужасали сложные HTML/CSS-файлы. Со временем вы будете разбираться в них все лучше и лучше понимать их закономерности.

Во-вторых, тут нужно понять, что есть дополнительные языки типа SASS/LESS, которые предоставляют дополнительные возможности и позволяют хранить каждый раздел в отдельном файле, а затем генерировать один сжатый CSS-файл.

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

Ну и наконец. Даже если вы проверите все страницы сайта и не найдете там некоторых классов - есть такая привычка программистов/разработчиков, написанная кровью: "Работает - не трогай". Иногда какой-то элемент со страницы убрали, а вот в CSS - забыли. Вот и выясняй, нужен этот класс или уже нет. Поэтому иногда "не рискуют". Кстати, большая проблема, когда пытаешься расчистить подобные "авгиевы конюшни". Можно даже сделать поиск по всему сайту, убедится, что элемента с классом special-header нигде не используется и удалить его. Но внезапно, оказывается, что этот класс добавлялся к элементу динамически с помощью JS и автопоиск не заметил этого и привет, на некоторых страницах поехала верстка.

В общем, не бойтесь, а работайте над усовершенствованием и со временем все сложное будет касаться очень простым и логичным ;-)

Андрій Павленкоотвечает на ваши вопросы в своейПрямой линии
11
0

Я не то, чтобы боюсь, просто иногда кажется, что я никогда все это не разберу. Во всяком случае, спасибо большое!))
Я думала, что в одном файле стилей могут быть стили для разных страниц и даже это проверяла эту идею, скачивая различные страницы сайта, но совпадений так и не нашла, и поэтому зашла в тупик и уже совершенно не знала, что делать. Но думаю, что я просто что-то там не нашла или не так, как надо, искала.
Кажется, теперь я могу, наконец-то, продолжить писать свой сайт. ))

0
Ответить

Я занимаюсь разработкой с 2007 года. И даже сейчас, когда открываю CSS-файл какого-то сайта, кажется, что все это не разберу :-D
Правильный ответ состоит в том, что чаще всего разбирать "все это" и не нужно.
Если есть модульность - можно править только то, что нужно, не вникая в подробности.
В этом плане очень помогает инспекция элементов и браузерах (Правая кнопка мыши -> Проверить элемент), там видно, какие стили задействованы в формировании этого участка.

+1
Ответить

Мой вам добрый совет - далеко не обязательно копаться целиком в стилевых файлах сайта, в 99% случаев достаточно видеть дерево наследования этих стилей для отдельных блоков. Пользуйтесь средствами разработки, встроенными в популярные браузеры, там есть очень удобные инструменты для разбора стилей и верстки.

+1
Ответить
Ещё 3 комментария

Если бы мне надо было бы просто сделать сайт, скопировав некоторые стили с других сайтов, то  - да, так бы и делала.
Я же учусь с 0, как создавать сайт. И лучше всего в этом мне помог именно разбор чужих кодов. В интернете много информации о том, как и что делать, где и чего писать, но нет ничего более информативного, чем чужая работа.)) Я просто разбираю, как сделал что-то другой человек, и пытаюсь перенести это на свою работу.

0
Ответить

Имхо, гораздо эффективнее взять базовый курс от простого к сложному на каком-нибудь udemy, а остальное учить и познавать уже на конкретном практическом опыте. CSS и HTML не такие сложные вещи...

+1
Ответить

Ну, мне оказалось проще так.

0
Ответить
Прокомментировать

Как правило стилевая таблица одна на весь сайт, т.е. для всех возможных страниц стили прописываются и собираются в один файл (в процессе разработки файлов может быть сколько угодно, но потом они собираются в один).
Делается это по целому ряду причин.

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

Во-вторых, разработчику так проще, потому что не надо дублировать общие стили в разные файлы или постоянно импортировать одно и то же.

В-третьих, серверу проще, поскольку число запросов к нему заметно уменьшается.

Илья Левинотвечает на ваши вопросы в своейПрямой линии
5
0
Прокомментировать

современные сайты пишутся на основе CSS фреймворков. Например на основе BootStrap. В таком случае результат выходит быстрее, а сама страница выходит гарантированно кроссбраузерной.

1
0
Прокомментировать

Есть несколько подходов к созданию разметки сайта.

1) Взять готовую библиотеку что-то типа bootstrap или w3css, и на основе этого сделать разметку со стилями. Этот подход хорош, когда нужно быстро и относительно качественно. Сам его использую, особенно нравится w3css. В стилевых файлах будет каша того, что никогда не будет использоваться. В этом же подходе можно сгенерировать стили под конкретный класс, выкинув все, что не нужно. Правда смысла в таком подходе не очень много - захотелось использовать элемент, который выкинули из стилей, а его нет.

2) Использовать LESS/SASS/Stylus и набор базовых стилей, например JEET/Skeleton и т.д. Данных фреймворков для css - мириад. Получите достаточно красивый css под конкретную разметку с минимумом лишнего. Достаточно большой порог вхождения, нужно поставить немного инструментария типа node.js 

3) Использовать генерацию CSS/HTML налету на серверной стороне. Это делают почти все языки программирования начиная от clojure и заканчивая ruby. В зависимости от используемого инструмента можно получить как развесистый css на все случаи жизни, так и очень компактный и быстрый.

4) Делать все ручками - но это сейчас совсем не в моде, куча браузеров, куча ограничений у каждого, куча дополнительных свойств. Так что здесь всегда лучше смотреть как минимум на пункты 1) и 2) в первую очередь, и на пункт 3) если разрабатываете не просто разметку и верстку, а что-то большее и интерактивное.

Алексей Черемисинотвечает на ваши вопросы в своейПрямой линии
1
0

Ухх, сложно. И непонятно. Но думаю, что, если разобраться с пунктами 1 и 2, надо. Ибо да, как-то, наверно, я все эти ограничения браузеров сама не учту, и будет у некоторый пользователей каша вместо сайта.
Спасибо за ответ))

0
Ответить

Вам сюда - https://www.w3schools.com/w3css/ прямо по шагам.

А здесь уже готовые шаблоны - https://www.w3schools.com/w3css/w3css_templates.asp

Мне он нравится больше всего, разобраться можно за день-два, а то и быстрее.

+1
Ответить

И да, что самое главное, w3css изначально сделан "отзывчивым", дизайн  хорошо выглядит на мобильных устройствах, и не только. Этот фреймворк не так популярен, как bootstrap, но он гораздо компактнее, легче кастомизируется, и не использует JS вообще (толкьо в редких случаях - открыть/закрыть меню), можно использовать любые библиотеки JS на свой вкус.

+1
Ответить

Ну а уж потов, если его будет не хватать, переходите к пунктам 2), а затем и 3) :-)

0
Ответить
Прокомментировать
Ответить
Читайте также на Яндекс.Кью
Читайте также на Яндекс.Кью