Главная → Программирование → by

Семантической системы Grid: Page Layout For Tomorrow

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

Problems

Проблема # 1: Они не Semantic

Самая большая жалоба, которую я слышал от пуристов, так как я создал 1 Кб CSS Grid Два года назад в том, что системы CSS сетки не позволяют правильное разделение разметки и презентации.Грид-систем требуют, чтобы веб-дизайнеры добавляют .grid_x CSS классы для HTML элементов, смешивая презентационной информацией с иным семантической разметки up.

Плавающих элементов должны быть очищены, часто требующей ненужных элементов, которые будут добавлены на страницу.Об этом свидетельствует «чистка» дел, который поставляется с 960.gs: 

<div class="grid_3">
	220
</div>
<div class="grid_9">
	700
</div>
<div class="clear"></div>

Проблема № 2: Они не Fluid

В то время как CSS сети хорошо работают для фиксированной ширины макеты, имея дело с жидкостью проценты сложнее.В то время как большинство систем сетку действительно обеспечивают жидкость вариант, они ломаются, когда вложенные столбцы вводятся.В 1KB сетки CSS примере ниже, .grid_6, как правило, устанавливается шириной до 50%, а .grid_3, как правило, устанавливается до 25%

Но когда .grid_3 появляется внутри .grid_6 клетки, проценты должны быть пересчитаны.В то время как типичная система сетки необходимо всего 12 CSS правила для указания ширины всех 12 колонн, жидкость сетки потребуется 144 правила, разрешающие только для одного уровня вложенности: возможно, но не очень convenient.

<div class="column grid_6">
	<div class="row">
		<div class="column grid_3"> </div>
		<div class="column grid_3"> </div>
	</div>
</div>

Проблема № 3: Они не Responsive

Отзывчивый веб-дизайн является ключевым словом этого года.В то время как новые инструменты, такие как 1140 CSS Grid и Adapt.js растут, что позволит вам изменить макет страницы в зависимости от размера экрана или типа устройства, оптимального решения до сих пор не arrive.

Blame It On The Tools

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

Ну, не так быстро.Пока мы ждем для браузеров, чтобы добавить родной CSS support на этой порочной сетке module, футуристическая версия CSS доступна today, которые уже поддерживаются всеми CSS-браузер с поддержкой: МЕНЬШЕ CSS.

screenshot Меньше приносит новые мощные возможности для CSS.

Менее то, что

Вы, наверное, слышали о меньшем, но, возможно, никогда не давал ему попробовать.Подобный SASS, меньше extends CSS, давая вам возможность использовать переменные, выполнять операции и развитие многоразовых Mixins.Ниже приведены несколько примеров того, что он может do.

Variables

Укажите значение один раз, и затем использовать его на протяжении стилей, определяя variables.

// LESS
@color: #4D926F;

#header {
  color: @color;
}

Выше примере будет составлять следующим образом: 

/* Compiled CSS */
#header {
  color: #4D926F;
}

Operations

Умножения, деления, сложения и вычитания значений и цветов с использованием operations.

// LESS
@border-width: 1px;

#header {
	border-left: @border-width * 3;
}

В этом примере, 1px умножается на 3 выход следующих: 

/* Compiled CSS */
#header {
	border-left: 3px;
}

Mixins

Самые мощные из всех, Mixins включить весь фрагменты CSS для повторного использования.Просто включите имя класса примесь в другой класс.Более того, LESS позволяет параметров, передаваемых в mixin.

// LESS
.rounded(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded(5px);
}

Verbose, браузер конкретных свойств CSS3 продемонстрировать выгоды, которые приносят Mixins: 

/* Compiled CSS */
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Минусы LESS

Будучи скептически менее на первый, я сейчас сильный защитник.МЕНЬШЕ стилей являются кратким и читаемым, и они поощряют кода для повторного использования.Тем не менее, есть некоторые потенциальные недостатки, чтобы быть в курсе:

  1. Она должна быть скомпилирована.Это один дополнительный шаг, что вам не придется беспокоиться о с ванильным CSS.
  2. В зависимости от того, как МЕНЬШЕ документов структурирован, составлен CSS файл может быть немного больше, чем эквивалентный ручной CSS file.

Примечание по составлению LESS

Есть три подхода к составлению МЕНЬШЕ стилей в CSS:

Comments are closed.