Руководство по bliss

Среди множества методологий организации стилей (BEM, SMACSS, OOCSS, SUITECSS) хочется отдельно выделить одну: CSS Bliss. Это квинтэссенция удобства использования и читабельности.

Для начала определимся в основных понятиях: модуль, элемент и модификатор. Эти определения наиболее близки БЭМу, за исключением того, что Модулем в CSS Bliss именуется Блок. Далее будет понятно, почему Модуль — более подходящее значение. В целом сама методология очень близка к БЭМу, но имеет свои особенности, о которых стоит поговорить отдельно, потому что именно они позволяют стать CSS Bliss на ступеньку выше остальных.

Основные отличия CSS Bliss:

1. Именование модуля, элементов и модификаторов:

Если в БЭМе основными разделительными частицами выступают «-» и «_»:

.my-module__my-element_modifier

то CSS Bliss улучшает читабельность путем использования заглавных букв:

.MyModule-myElement--modifier

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

Возможно, на абстрактном примере это плохо видно, возьмем пример более приближенный к реальному проекту. Сравните:

<li class="custom-user-menu__list-item_size-normal"></li>

<li class="CustomUserMenu-listItem--sizeNormal"></li>

Первый БЭМовский вариант длиннее и сложнее в прочтении. Особенно сливается модификатор с названием элемента. Второй (CSS Bliss) более компактен и визуально разделен на понятные компоненты: модуль, элемент и модификатор. При чем отличие в первой букве моментально дает понимание что перед нами: модуль или элемент (модуль начинается с заглавной, а элемент — со строчной).

Если я вас еще не убедила, вот еще один пример из документации БЭМа для модификаторов «ключ — значение»:

.block-name__elem-name_mod-name_mod-val

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

2. Позиционирование компонентов.

Модуль независим и самодостаточен сам по себе. Он должен выглядеть одинаково в любом месте и при любом разрешении, именно поэтому он имеет одно важное ограничение: модуль не должен содержать в себе свойства, которые бы жестко задавали его позиционирование, а именно: размеры (width), внешние отступы (margin) и позиционирование по отношение к другим элементам (position). Эти свойства должны задаваться либо в модификаторе модуля либо этот модуль так же является элементом внешнего блока, который (элемент) и определяет его положение.

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

3. Организация структуры

Несмотря на удобство организации файловой структуры в БЭМе, он предполагает излишне дробное деление: каждый модификатор и элемент выносится в отдельный файл. Пример:

blocks
├─── popup
|    ├──── _target
|    |    ├──── popup_target.css
|    |    ├──── popup_target_anchor.css
|    |    └──── popup_target_position.css
|    └──── _visible
|         ├──── popup_visible.css
|         ├──── popup.css
|         └──── popup.js

Тогда как в CSS Bliss предполагает создавать файлы только для модулей, а его внутренние элементы и модификаторы описывать внутри этого же файла, так как вне его они не имеют смысла:

css
├─── modules
|    ├──── _PopupDialog.scss
|    ├──── _Btn.scss
|    └──── _ElmInfo.scss
├─── _base.scss
├─── _colors.scss
├─── _mixins.scss
├─── _zindex.scss
└─── application.scss

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

4. Состояние элемента: state

Очень часто нам нужно определять состояние элемента или модуля: активный, скрытый, доступный, использованный и проч. Использование для этого модификатора не только загромождает читаемость html, но и загрязняет javascript.

Пример на БЭМе:

<div class="my-module__my-mlement my-module__my-mlement_my-modifier-with-state"></div>

Пример на Bliss CSS:

<div class="MyModule-myElement isState"></div>

В последнем примере мы используем для изменения состояния в js не длиное название модификатора: «my-module__my-mlement_my-modifier-with-state», а привычное и универсальное «isState». Из-за того, что состояние определяется только для конкретного модуля или элемента, оно обладает локальным воздействием на него. А универсальное наименование состояния позволяет при необходимости переиспользовать js-код для различных элементов страницы.

5. Использование @extend

Лично я — противник использования такой возможности sass как расширение классов с помощью @extend. Главные требования к CSS должны быть:

• простота
• читабельность
• легкоизменяемость

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

6. Документация

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

Это лучшая прикладная документация, которую я встречала.

Выводы

Несмотря на большую популярность БЭМа в последнее время, CSS Bliss по всем вышеуказанным причинам гораздо практичнее. И как и прочие методологии она вырабатывает привычку думать не в разрезе страницы, а в терминах компонентов: модули, элементы, модификаторы; что делает процесс написания css’a более осознанным, так как от привильного разбиения на компоненты зависит не только красота кода, но и жизнеспособность стилей в будущем.

BLISS — это язык системного программирования, разработанный в Карнеги Университет Меллона от У. А. Вульф и А. Н. Хаберманн примерно в 1970 году. Это был, пожалуй, самый известный язык системного программирования до тех пор, пока несколько лет спустя не дебютировал C. С тех пор C взлетел, и BLISS растворились в безвестности. Когда C был в зачаточном состоянии, несколько проектов в Bell Labs обсуждали достоинства BLISS по сравнению с C.

BLISS — это язык с блочной структурой без типов, основанный на выражениях, а не на утверждениях, и включает конструкции для обработки исключений, сопрограмм и макросов. Он не включает инструкцию goto.

Название, по-разному, является сокращением от «Базовый язык для реализации системного программного обеспечения» или «Язык реализации системного программного обеспечения в обратном направлении». Иногда его называли «языком Билла для реализации системного программного обеспечения» в честь Билла Вульфа.

Первоначальный компилятор Карнеги-Меллона отличался широким использованием оптимизаций и лег в основу классической книги Дизайн оптимизирующего компилятора.

DEC разработала и обслуживала компиляторы BLISS для PDP-10, PDP-11, VAX, DEC Prism, MIPS, DEC Alpha и Intel IA-32. Язык не стал популярным среди клиентов, и у немногих был компилятор, но DEC широко использовала его в дом в 1980-е годы; большинство служебных программ для VMS операционной системы были написаны на BLISS-32. После приобретения DEC, Compaq разработала и обслуживала компилятор BLISS для Intel IA-64.

Содержание

• 1 Описание языка
• 2 Пример источника
• 3 Версии
• 4 Примечания
• 5 Ссылки
• 6 Внешние ссылки
  • 6.1 Загрузки

Описание языка

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

С другой стороны, BLISS опускает некоторые функции других языков высокого уровня. Он не имеет встроенных средств для ввода / вывода, потому что проект системного программного обеспечения обычно разрабатывает свой собственный ввод / вывод или строится на базовых службах ввода / вывода монитора или управления экраном… он разрешает доступ к специфическим для машины функциям, потому что системное программное обеспечение часто требует этого. BLISS имеет характеристики, необычные для языков высокого уровня. Имя… обычно интерпретируется как адрес этого сегмента, а не как значение сегмента… Кроме того, BLISS — это «язык выражения», а не «язык операторов».

Это означает, что каждая конструкция языка, не являющаяся объявлением, является выражением. Выражения производят значение, а также могут вызывать такие действия, как изменение памяти, передача управления или выполнение программного цикла. Например, аналогом «оператора» присваивания в BLISS, строго говоря, является выражение, которое само имеет значение. Значение выражения может быть использовано или отброшено в BLISS… Наконец, BLISS включает макро-средство, которое обеспечивает уровень возможностей, обычно свойственный только макроассемблерам.

— Bliss Language Manual, Digital Equipment Corporation (1987)

Язык BLISS имеет следующие характеристики:

• Все константы являются полными словами для используемой машины, например на 16-битной машине, такой как PDP-11, константа составляет 16 бит; на компьютере VAX константа составляет 32 бита, а на PDP-10 константа составляет 36 бит.
• A ссылка на переменную всегда указывает на адрес этой переменной. Например, инструкция Z + 8относится к добавлению 8 к адресу Z, а не к его значению. Если нужно добавить 8 к значению Z, необходимо поставить перед переменной точку; поэтому можно ввести .Z + 8для выполнения этой функции, которая добавляет 8 к содержимому Z.
• Присваивание выполняется с помощью стандартного символа =, например Z = 8— который говорит, что нужно создать константу из полного слова, содержащую 8, и сохранить ее в месте, адрес которого соответствует адресу Z. Итак, Z + 12 = 14(или, в качестве альтернативы 12 + Z = 14) помещает константу 14 в место, которое находится на 12 слов после адреса Z. (Это считается плохой практикой.)
• Операторы блока аналогичны те из ALGOL : блок запускается оператором BEGINи завершается END. Как и в случае с ALGOL, операторы заканчиваются точкой с запятой («;»). Когда значение вычисляется, оно сохраняется до конца следующего оператора, что означает, что значение может быть вычислено, присвоено переменной и при желании перенесено в следующий оператор. В качестве альтернативы, открывающая скобка может использоваться для начала блока, а закрывающая скобка используется для закрытия блока. Когда скобки включены в выражение, используются стандартные правила приоритета, в которых сначала вычисляются выражения в скобках,
• Условное выполнение использует выражение IF, которое проверяет условие истина-ложь, выполняет альтернативные действия и возвращает результат.
• Сравнение использует такие ключевые слова, как EQLдля равенства (в отличие от перегрузки символа = для с той же целью), GTRдля Greater Than и NEQдля не равно. Например, следующий код присвоит абсолютное значение Z адресу, указанному Q:

Q = (IF.Z GTR 0 THEN.Z ELSE -.Z);

• Идентификаторы (переменные и константы) должны быть объявлены перед использованием, обычно с использованием ключевого слова OWN. Объявление переменной обычно заставляет компилятор выделять для нее место; при необходимости переменной может быть назначен фиксированный машинный адрес через объявление BIND. Эта функция в основном используется для доступа либо к машинным регистрам, либо к некоторым специальным адресам.
• Подпрограммы в языке называются подпрограммами и объявляются с ключевым словом ROUTINE.
• Макросы, которые позволяют подстановки текста, объявляются с ключевым словом MACRO.
• . Язык поддерживает массивы, которые называются структурами и объявляются с ключевым словом VECTOR.
• . Язык поддерживает некоторые высокоуровневые программные конструкции, такие как
  • Альтернативные пути выполнения через выражение CASE
  • Цикл с использованием выражения INCR, который похож на оператор FOR ALGOL
  • Встроенные строковые функции
  • Некоторые автоматические преобразования данных (число в строку и т. д.)

Пример исходного кода

Следующий пример дословно взят из Bliss Language Manual:

МОДУЛЬ E1 (MAIN = CTRL) = BEGIN FORWARD ROUTINE CTRL, STEP; ROUTINE CTRL =! +! Эта процедура вводит значение, работает с ним и! затем выводит результат. ! - НАЧАТЬ ВНЕШНИЙ РЕЖИМ GETNUM,! Введите число с терминала PUTNUM; ! Выведите число на клемму LOCAL X,! Хранение входного значения Y; ! Хранение выходного значения GETNUM (X); Y = ШАГ (.X); PUTNUM (.Y) END; ОБЫЧНЫЙ ШАГ (A) =! +! Эта процедура добавляет 1 к заданному значению. ! - (.A + 1); END ELUDOM

Версии

• BLISS-10
• BLISS-11 — кросс-компилятор для PDP-11
• BLISS-16
• BLISS-16C — версия BLISS-11
• BLISS-32
• BLISS-36
• BLISS-64
• Common BLISS — переносимая подмножество

Примечания

Ссылки

• Wulf, WA; Рассел, Д. Б.; Хаберманн, А. Н. (1971). BLISS: язык системного программирования. CACM 14 (12): 780-790, декабрь 1971 г.
• Wulf, W.A.; Johnson, R.K.; Weinstock, C. B.; Hobbs, S.O.; Гешке, К. М. (1975). Дизайн оптимизирующего компилятора. Нью-Йорк: Эльзевир, ISBN 0-444-00158-1 .
• Брендер, Рональд Ф. (2002). «Язык программирования BLISS: история» (PDF). Программное обеспечение: практика и опыт. 32 (10): 955–981. doi : 10.1002 / spe.470.

Внешние ссылки

• Руководство по BLISS на DECUS
• Алан Леготски публикует сообщение о BLISS на DEC
• «BLISS: язык системного программирования» Автор: WA Wulf, DB Рассел, А. Хаберманн. (PostScript)
• Заметки к сеансу «Введение в BLISS» Мэтью Д. Мэдисона. (PostScript)

Загрузки

• BLISS-10
• BLISS-11
• BLISS-36
• BLISS-11, BLISS-32 и BLISS-64
• FreeVMS Portable BLISS для GCC