48  /  382
Справочник

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

Просмотров: 34039
Дата последнего изменения: 02.11.2023
Роберт Басыров
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет
  • При создании правила для нескольких селекторов помещайте каждый селектор на отдельной строке.
  • Перед открывающей скобкой ставьте один пробел.
  • Внутри блока объявлений помещайте каждое объявление на отдельной строке.
  • Добавляйте один уровень отступов перед каждым объявлением.
  • Ставьте пробел после двоеточия внутри объявления.
  • Всегда ставьте точку с запятой после последнего объявления в блоке.
  • Ставьте закрывающую скобку на одной вертикальной линии с первым символом в селекторе.
  • Ставьте пробел после каждой запятой в объявлениях со множественным значением.
  • Разделяйте правила пустой строкой.
  • Сортируйте свойства по принципу: свойства, сильно влияющие на элемент, в начале, а самые незначительно влияющие - в конце:
    • Display
    • Позиционирование (position/float)
    • Боксовая модель (width/height/margin/padding/border/box-sizing)
    • Цвета и типографика
    • Остальное

    Плохо:

        .crm-lead-form { margin: 34px; color: #000; }
        .crm-lead-title, .crm-invoice-title, .crm-company-title
        {
            position: relative;
            background: #000;
            height: 15px;
            padding: 10px;
            border: 1px solid red;
            margin: 12px 0 17px;
            display: block;
            color: #fff;
            width: 15px;
        }
    Хорошо:
    	.crm-lead-form {
    		margin: 34px;
    		color: #000;
        }
    
    	.crm-lead-title,
    	.crm-invoice-title,
    	.crm-company-title {
    		display: block;
    		position: relative;
    		width: 15px;
    		height: 15px;
    		padding: 10px;
    		border: 1px solid red;
    		margin: 12px 0 17px;
    		color: #fff;
    		background: #000;
    	}
  • Для значений с пробелами (font-family, url()) и для свойства content используйте двойные кавычки.
    	.disk-user-profile {
    		font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;
    	}
    
    	.disk-user-profile:after {
    		display: block;
    		content: "";
    	}
  • Исключения

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

    	.crm-column-title { width: 10%; }
    	.crm-column-author { width: 20%; }
    	.crm-column-actions { width: 30%; }
    
    	.menu-icon-create { background-position: 0 0; }
    	.menu-icon-delete { background-position: -15px -35px; }
    	.menu-icon-approve { background-position: -34px -35px; }
    Длинные значения свойств, разделяемые запятыми - как, например, набор градиентов или теней - могут быть помещены на отдельной строке каждое, чтобы повысить читабельность кода и сообщений в системе управления версиями. Формат записи может слегка различаться, один из вариантов приведён ниже.
    	.disk-info-popup {
    		box-shadow:
    			1px 1px 1px #000,
    			2px 2px 1px 1px #ccc inset;
    		background-image:
    			linear-gradient(#fff, #ccc),
    			linear-gradient(#f3c, #4ec);
    	}

23
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии