OrnaJS — свободная JavaScript библиотека для динамической стилизации HTML элементов без прямого написания JS или CSS кода. Стилизация осуществляется методом прибавления классов к HTML элементу, как и в привычных CSS-библиотеках. В отличие от СSS-библиотек, Orna не ограничена количеством ранее прописанных в ней классов, а работает как парсер, динамически обрабатывает класс и задает стиль. Стилизация в OrnaJS основана по принципу Atomic CSS, из чего следует, что вид элемента создается по частям (атомам), но не одним классом. Орну можно сравнить с атрибутом style в HTML, но с наследованием, сокращениями и событиями. Имя Orna сокращение от Ornament (украшение). В первые два месяца после публикации, хотя Орна предлагает нестандартный метод стилизации страниц, ее успели скачать более 2000 разработчиков, что говорит о растущей популярности динамической стилизации.

OrnaJS и Atomic CSS

Atomic CSS — методология написания CSS кода, которая соблюдает принцип «один класс = одно свойство». При написании стилей по методологии Atomic CSS, разработчик создает универсальные классы, которые в большинстве случаев несут только одно свойство и его значение. Она призвана убрать повторяемость, многословность, запутанность при работе CSS и также с CSS препроцессорах, Less, Sass. CSS является фундаментом для создания стилей он дает возможность сделать надстройки и разрабатывать удобные архитектуры для конкретных разработчиков, именно поэтому у него полная форма свойств и нет строгой архитектуры. архитектура Atomic CSS разрабатывается командой из Yahoo, OrnaOrg и всеми энтузиастами.

Проект OrnaJS начался в 2015 году и изначально разрабатывался как инструмент для удобной реализации Atomic CSS архитектуры, но потом был подвержен реформации и сейчас соблюдает от части правила из Atomic CSS и от части из React CSS.
React CSS — реактивный CSS, в отличие от методологии Atomic CSS работает с динамическими стилями, которые создаются в процессе работы с элементами. React CSS методология, которая широко используется при создании SPA, где элементы разметки создаются динамически и изначально их еще нет. Команда Orna создала отдельную библиотеку для полной реализации Atomic CSS, которая предполагает уже описание атомарные стили, а не их динамическое создание, Orna4Node. Orna4Node автоматически генерирует CSS файл на основе классов прописанных в элементах, в отличие от OrnaJS которая не создает CSS файл, а на прямую, методами JavaScript обращается к DOM дереву. Orna4Node похожа по работе на Atomizer от Yahoo!..

OrnaJS и jQuery

OrnaJS работает вместе с библиотекой jQuery, из которой вынесла основные селекторы и выборки по элементам. Orna работает с первой версией jQuery, со второй и с третьей, выбор поставлен на разработчика.

bgc_red_div:even — класс задает красный цвет фона всем четным, дочерним div элементам.

bgc_red_div:odd — класс задает красный цвет фона всем нечетным, дочерним div элементам.

bgc_red_div:first — класс задает красный цвет фона первому дочернему div элементу.

bgc_red_div:last — класс задает красный цвет фона последнему дочернему div элементу.

bgc_red_option:selected — класс задает красный цвет фона всем выбраним дочерним элементам option.

bgc_red_input[type=text] — класс задает красный цвет фона всем дочерним элементам input с типом текст.

bgc_red_#menu — класс задает красный цвет фона дочернему элементу с id menu.

bgc_red_.menu — класс задает красный цвет фона всем дочерним элементам с классом menu.

Основное предназначение

Основное предназначение библиотеки-парсера OrnaJS упростить работу при стилизации элементов разметки. Орна помогает избавиться от повторяемости стилей, чрезмерной многословности и что основное от работы над структуризацией СSS кода. Так как Орна переняла основные идеи от методологии Atomic CSS, при работе с ней все атомарно, то есть стиль собирается частицами и все стили ложатся независимо, чисто, без необходимости усердного рефакторинга. Также с использованием Орны больше нет необходимости задавать стили элементам при помощи jQuery или Native JavaScript, так как в Орне это гораздо проще, из-за уровня абстракции, что работает по принципу водопада html --> ornajs --> jquery --> native javascript.

Использование

Использовать Орну можно и для полной стилизации странниц или как дополнение к основным каркасным стилям. В современной тенденции веб-разработки, где много динамики и состояний, разработчики все больше и больше отходят от статической HTML и СSS разметки, в сторону их динамического создания в процессе взаимодействия пользователе с интерфейсом. OrnaJS может быть использована в контексте с react.js, riot.js, handlebars.js, angular.js, bootstrap.

Подключение библиотек:

<head>
<script src="jquery.js"></script>
<script src="orna.js"></script>
</head>

Структура классов в OrnaJS

property_value
color_red

property_value_event
color_red_click

property_value_childtagname
color_red_div

property_value_event_childtagname
color_red_click_div

property_value_childtagname_event
color_red_div_click

Стилизация

<div class="bgc_black c_yellow h_100px br_20px shadow_0_0_20px_0_red">Hello! I'm decorated by OrnaJS...</div>

<div class="bgc_black_a c_yellow_a h_30px_a br_20px_a">Hello! My (a)link decorated by OrnaJS...
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>

DOM дерево

Если динамически изменить DOM дерево?

1. Все новые элементы автоматически следуют стилям, которые были указаны через родительские элементы для дочерних, без перезапуска Орны.

Пример:

<div class = "text-decoration_none_a border_none_button"> 
<a>link</a>
<button>Click</button>
</div>

2. Если были добавлены новые элементы уже с прописанными в них классами OrnaJS, то чтобы эти классы присвоились надо перезапустить OrnaJS.

Для этого запустить нужно функцию createatom(); Без аргумента функция стилизует все новые элементы, минуя старые, с аргументом конкретный новый элемент.

В OrnaJS подключаются любой font, который есть на компьютере в системных шрифтах, или загружен прямо в СSS и в его названии нет пробелов, так как пробел OrnaJS понимает, как конец класса. Два шрифта Arial и Times New Roman подключаются одним словом (arial, times) просто для быстрого доступа, а вообще нужно писать класс:

<span class="ff_Verdana">Text</span>
<span class="font-family_Verdana">Text</span>

Демо

codepen.io/DimaPopov/pen/dXyZQR
codepen.io/DimaPopov/pen/JKEaby
fiddle.jshell.net/dimapopov/hokLfqqo
www.youtube.com/watch?v=k4mkK_3YUk8

Ссылки

ornaorg.github.io
ornaorg.github.io/AtomicCSS.html
www.npmjs.com/package/ornajs
github.com/OrnaOrg
github.com/OrnaOrg/OrnaJS