# Bitrix Cms Basics > Covers CMS fundamentals — sites, site templates, menus, page templates, includes, breadcrumbs, styles/CSS handling (styles.css vs template_styles.css, Asset::addCss, SetAdditionalCSS), user groups, user fields, admin panel. Applied for site structure and content management tasks. Key terms — CSite, template, menu, include area, styles.css, SetAdditionalCSS, user field, UF. - Skill: `bxmaximum/bitrix-cms-basics` (Agent Skill) - Install (CLI): `npx skillmds@latest add bxmaximum/bitrix-cms-basics` - Raw SKILL.md: https://api.skillmd.com/api/skills/bxmaximum/bitrix-cms-basics/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: bxmaximum (https://skillmd.com/u/bxmaximum) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/bxmaximum/bitrix-cms-basics --- # CMS Basics Baseline: **main 23.0+**. Features newer than baseline are marked **Since**. Site management layer above the framework — sites, templates, menus, content areas. Landing sites / Sites24: skill `bitrix-landing`. ## Sites (Multisite) ORM tablet: `\Bitrix\Main\SiteTable` → table `b_lang` (`main/lib/SiteTable.php`). Legacy: `CSite`. Key fields: `LID` (primary, e.g. `s1`), `NAME`, `DIR`, `DOC_ROOT`, `SERVER_NAME`, `SITE_NAME`, `LANGUAGE_ID`, `CULTURE_ID`, `ACTIVE`, `DEF`. ```php $site = \Bitrix\Main\SiteTable::getRow([ 'filter' => ['=LID' => SITE_ID], 'select' => ['LID', 'DIR', 'SERVER_NAME', 'DOC_ROOT', 'LANGUAGE_ID'], ]); $docRoot = \Bitrix\Main\SiteTable::getDocumentRoot(SITE_ID); ``` `SITE_ID` / `SITE_DIR` are available after kernel init. Resolve site by host/path: `SiteTable::getByDomain($host, $directory)`. ## Site Templates Location: `/local/templates//` ``` /local/templates/mytemplate/ ├── header.php ├── footer.php ├── description.php # Template meta ($arTemplate), incl. EDITOR_STYLES ├── styles.css # Content styles — also loaded by the visual editor ├── template_styles.css # Template frame styles (header/footer/grid) ├── .styles.php # Visual editor style list entries ├── components/ # Template-level component overrides ├── page_templates/ # Page layout templates └── lang/ ``` **`#WORK_AREA#`** — required placeholder in the site template (often a single-file template or between `header.php` / `footer.php` flow). The kernel injects the page body at `#WORK_AREA#`. Missing marker → admin error “set the #WORK_AREA# separator”. Template selected per site in Admin → Sites → Edit. Prefer `/local/templates/`, not `/bitrix/templates/`. ## Styles (CSS) Store CSS next to the owner of the markup: | Owner of markup | Where CSS lives | | --- | --- | | Site frame (`header.php` / `footer.php`, grid, background) | `template_styles.css` of the site template | | Page content that must be styleable in the visual editor | `styles.css` + `.styles.php` of the site template | | Component template markup (`template.php`) | `style.css` next to the component template | | JS-extension UI loaded via `Extension::load()` | CSS inside the extension (`config.php` `css` key) — skill `bitrix-extensions` | | One-off page CSS | `Asset::getInstance()->addCss()` / classic `SetAdditionalCSS()` | **`styles.css` vs `template_styles.css`:** the visual editor renders content in an iframe and injects `styles.css` into its `` — never put site-frame rules there, or they distort the editor; keep them in `template_styles.css`. Both files are editable in Admin → *Settings → Product settings → Sites → Site templates* (tabs "Site styles" / "Template styles"). **Visual editor style list** — `.styles.php` in the template returns entries (CSS rule itself goes to `styles.css`): ```php return [ 'example' => [ // array key = CSS class name 'tag' => 'p', // tag(s) the style applies to; comma-separated list allowed 'title' => 'Test style', // name shown in the editor 'html' => 'Preview', // optional styled preview // optional 'section' => groups entries in the editor's style dropdown ], ]; ``` **Editor-only CSS files** — `EDITOR_STYLES` in the template's `description.php` (`$arTemplate`): `'EDITOR_STYLES' => ['/bitrix/css/main/bootstrap.css', ...]`. Loaded only in the visual editor; include them separately for the public site if needed. **Include APIs:** ```php $APPLICATION->ShowCSS(); // classic, in header.php : outputs page + template CSS set $APPLICATION->SetAdditionalCSS('/local/templates/demo/additional.css'); // classic add to that set \Bitrix\Main\Page\Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/styles/page.css'); // 2nd param $additional=true → file goes to the template set, after styles.css / template_styles.css \Bitrix\Main\UI\Extension::load('demo.product-card'); // extension JS+CSS from its config.php ``` Prefer `Asset::addCss()` (D7) or `Extension::load()` for new code; `ShowCSS()` / `SetAdditionalCSS()` belong to classic site templates. **Optimization** (Admin → *Settings → Product settings → Module settings → Main module*): merge CSS files (`main` option `optimize_css_files`), use existing `.min` versions, gzip copies (`compres_css_js_files`, requires zlib). Merge applies only to Asset-registered CSS, is skipped in the admin section and Ajax mode, and can be disabled via `disableOptimizeCss()`. Merged files live in `/bitrix/cache/css//