Правила форматирования CSS

`;document.write(t),showTopNotification()}}
  • ARعربي
  • ENEnglish
  • ESEspañol
  • FAفارسی
  • FRFrançais
  • IDIndonesia
  • ITItaliano
  • JA日本語
  • KO한국어
  • RUРусский
  • TRTürkçe
  • UKУкраїнська
  • ZH简体中文

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на свой язык

КупитьEPUB/PDF

July 4, 2022

Для того, чтобы CSS легко читался, полезно соблюдать пять правил форматирования.

Так – неверно:

/*+ no-beautify */
#snapshot-box h3 { padding: 0 0 6px 0; font-weight: bold; position: absolute; left: 0; top: 0; }

Так – правильно:

/*+ no-beautify */
#snapshot-box h3 {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 0 6px 0;
  font-weight: bold;
}

Цель – лучшая читаемость, проще найти и поправить свойство.

Неправильно:

/*+ no-beautify */
#snapshot-box h3, #profile-box h3, #order-box h3 {
  padding: 0 0 6px 0;
  font-weight: bold;
}

Правильно:

/*+ no-beautify */
#snapshot-box h3,
#profile-box h3,
#order-box h3 {
  padding: 0 0 6px 0;
  font-weight: bold;
}

Цель – лучшая читаемость, проще найти селектор.

Рекомендуется располагать свойства в следующем порядке:

  1. Сначала положение элемента относительно других: position, left/right/top/bottom, float, clear, z-index.
  2. Затем размеры и отступы: width, height, margin, padding
  3. Рамка border, она частично относится к размерам.
  4. Общее оформление содержимого: list-style-type, overflow
  5. Цветовое и стилевое оформление: background, color, font

Общая логика сортировки: «от общего – к локальному и менее важному».

При таком порядке свойства, определяющие структуру документа, будут видны наиболее отчётливо, в начале, а самые незначительно влияющие (например цвет) – в конце.

Например:

/*+ no-beautify */
#snapshot-box h3 {
  position: absolute; /* позиционирование */
  left: 0;
  top: 0;
  padding: 0 0 6px 0; /* размеры и отступы */
  color: red;         /* стилевое оформление */
  font-weight: bold;
}

Свойство без префикса пишется последним.

Например:

-webkit-box-shadow:0 0 100px 20px #000;
box-shadow:0 0 100px 20px #000;

Это нужно, чтобы стандартная (окончательная) реализация всегда была важнее, чем временные браузерные.

Стили можно разделить на две основные группы:

  1. Блоки-компоненты имеют свой CSS. Например, CSS для диалогового окна, CSS для профиля посетителя, CSS для меню.

    Такой CSS идёт «в комплекте» с модулем, его удобно выделять в отдельные файлы и подключать через @import

    .

    Конечно, при разработке будет много CSS-файлов, но при выкладке проекта система сборки и сжатия CSS заменит директивы @import на их содержимое, объединяя все CSS в один файл.

  2. Страничный и интегрирующий CSS.

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

    /*+ no-beautify */
    .tab .profile { /* профиль внутри вкладки */
      float: left;
      width: 300px;
      height: 200px;
    }

    Важные страничные блоки можно выделять особыми комментариями:

    /** ===========================
     *  Профиль посетителя
     *  ===========================
    */
    .
    profile { border: 1px solid gray; } .profile h3 { color: blue; font-size: 1.8em; }

CSS-препроцессоры, такие как SASS, LESS, Stylus, Autoprefixer (доступен как онлайн-инструмент) делают написание CSS сильно удобнее.

Выберите один из них и используйте. Единственно, они добавляют дополнительную предобработку CSS, которую нужно учесть, и желательно, на сервере.

Предыдущий урокСледующий урок

Поделиться

Карта учебника

  • © 2007—2022  Илья Кантор
  • о проекте
  • связаться с нами
  • пользовательское соглашение
  • политика конфиденциальности

О чём пойдёт речь

`;document.write(t),showTopNotification()}}
  • ARعربي
  • ENEnglish
  • ESEspañol
  • FAفارسی
  • FRFrançais
  • IDIndonesia
  • ITItaliano
  • JA日本語
  • KO한국어
  • RUРусский
  • TRTürkçe
  • UKУкраїнська
  • ZH简体中文

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на свой язык

КупитьEPUB/PDF

7 июня 2022 г.

Неужели мы сейчас будем учить CSS? Ничего подобного. Предполагается, что вы уже знаете CSS, во всяком случае понимаете его на таком уровне, который позволяет делать Web-страницы.

Особенность квалификации JavaScript-разработчика заключается в том, что он не обязан выбирать цвета, рисовать иконки, «делать красиво». Он также не обязан верстать макет в HTML, разве что если является по совместительству специалистом-верстальщиком.

Вот что он должен уметь абсолютно точно – так это и разработать такую структуру HTML/CSS для элементов управления, которая не сломается, и с которой ему же потом удобно будет взаимодействовать.

Это требует отличного знания CSS в области позиционирования элементов, включая тонкости работы display, margin, border, outline, position

, float, border-box и остальных свойств, а также подходы к построению структуры компонент (CSS layouts).

Многое можно сделать при помощи JavaScript. И зачастую, не зная CSS, так и делают. Но мы на это ловиться не будем.

Если что-то можно сделать через CSS – лучше делать это через CSS.

Причина проста – обычно, даже если CSS на вид сложнее – поддерживать и развивать его проще, чем JS. Поэтому овчинка стоит выделки.

Кроме того, есть ещё одно наблюдение.

Знание JavaScript не может заменить знание CSS.

Жить становится приятнее и проще, если есть хорошее знание и CSS, и JavaScript.

Ниже находится «чек-лист». Если хоть одно свойство незнакомо – это стоп-сигнал для дальнейшего чтения этого раздела.

  • Блочная модель, включая:

    • margin, padding, border, overflow
    • а также height/width и min-height/min-width.
  • Текст:

    • font
    • line-height.
  • Различные курсоры cursor.

  • Позиционирование:

    • position, float, clear, display, visibility
    • Центрирование при помощи CSS
    • Перекрытие z-index и прозрачность opacity
  • Селекторы:

    • Приоритет селекторов
    • Селекторы #id, .class, a > b
  • Сброс браузерных стилей, reset.css

Книжек много, но хороших – как всегда, мало.

С уверенностью могу рекомендовать следующие:

  • Большая книга CSS3. Дэвид Макфарланд.
  • CSS. Каскадные таблицы стилей. Подробное руководство. Эрик Мейер
  • Отладка CSS Ахмад Шадид

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

Это очерки для лучшей систематизации и дополнения уже существующих знаний.

Предыдущий урокСледующий урок

Поделиться

Карта учебника

  • © 2007—2022  Илья Кантор
  • о проекте
  • связаться с нами
  • пользовательское соглашение
  • политика конфиденциальности

Разница между CSS и JavaScript

Просмотреть обсуждение

Улучшить статью

Сохранить статью

  • Последнее обновление: 12 июн, 2022

  • Читать
  • Обсудить
  • Посмотреть обсуждение

    Улучшить статью

    Сохранить статью

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

    CSS: CSS расшифровывается как

    Каскадная таблица стилей , это язык таблицы стилей, используемый для формирования элементов HTML, которые будут отображаться в браузерах как веб-страница. Без использования CSS веб-сайт, созданный с использованием HTML, будет выглядеть скучно. В основном CSS обеспечивает внешнюю оболочку для любых элементов HTML. Если вы рассматриваете HTML как скелет веб-страницы, то CSS будет оболочкой скелета. Тип интернет-медиа (тип MIME) CSS — text/CSS.

    Особенности CSS:  

    • CSS совместим со всеми устройствами.
    • С помощью CSS обслуживание веб-сайта становится проще и быстрее.
    • CSS поддерживает последовательные и спонтанные изменения.
    • CSS ускоряет работу веб-сайта и расширяет возможности поисковых систем по сканированию веб-страниц.
    • Обладает особой особенностью — возможностью изменять положение.

    JavaScript: Это легкий, кроссплатформенный и интерпретируемый язык сценариев. Он хорошо известен разработкой веб-страниц, его также используют многие небраузерные среды. JavaScript можно использовать как для разработки на стороне клиента, так и для разработки на стороне сервера. JavaScript содержит стандартную библиотеку объектов, таких как Array, Date и Math, а также основной набор языковых элементов, таких как операторы, управляющие структуры и операторы. JavaScript можно использовать как Клиентская сторона , а также Серверная сторона .

    Особенности JavaScript:  

    • JavaScript был создан в первую очередь для манипулирования DOM. Ранее веб-сайты были в основном статичными, после JavaScript были созданы динамические веб-сайты.
    • Функции в JS являются объектами. Они могут иметь свойства и методы, как и любой другой объект. Их можно передавать в качестве аргументов в другие функции.
    • Может обрабатывать дату и время.
    • Выполняет проверку формы, хотя формы создаются с использованием HTML.
    • Компилятор не требуется.

    Разница между CSS и JavaScript:  

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