Difference between #7 and #8 of
CSS Naming Conventions

Revision #8 has been created by samdark on Jan 20, 2019, 8:59:41 PM with the memo:

Updated markdown code block syntax
« previous (#7)

Changes

Title unchanged

CSS Naming Conventions

Category unchanged

Tutorials

Yii version changed

1.1

Tags changed

CSS, naming conventions

Content changed

[...]
The naming conventions for CSS classes are as follows:

- CSS classes that are meant to be shared should be prefixed with `g-`. For example, we can have names like `g-submit-button`, `g-link-button`. The declaration of the corresponding styles should be put in the aforementioned `global.css` file, and can use the simple syntax like the following:

~~~```css .g-link-button { ... } ~~~``` - Each action view file must have a root container that contains all its view content. The root container must declare a class named as the view path. For example, the `post/index.php` view file should content like the following: ~~~
 
[```html] <div class="post-index"> ...view content here... </div> ~~~``` - Declaration of the CSS styles of an action view should be put into the corresponding controller CSS file. Each declaration must be prefixed by the root container class. For example, to declare the CSS styles for an item element in the `post/index` view, we should put the following CSS styles in the `post.css` file: ~~~```css /* in post.css file */ .post-index .item { ... } ~~~``` - CSS class naming and style declaration for a widget view follow the similar rules for action views. For example, the `LatestComments` widget should use root CSS class name as `widget-latest-comments`, and declare its comment styles in the `widget-latest-comments.css` file like the following: ~~~```css /* in widget-latest-comment.css file */ .widget-latest-comments .comment { ... } ~~~```

- A layout view file should also have a root container named after the layout name with prefix `layout-`. For example, the `main` layout should use CSS class named as `layout-main` for its root container. To avoid naming conflict with the inserted view content, the CSS class of container elements in the layout may be prefixed with the root container class name. For example, the header section may use the name `layout-main-header`; the content section may use `layout-main-content`.
[...]
Third, modify the application main layout view by inserting the following code in the HTML head section:

~~~
 
[html]```php
<head>
......
[...]
<?php endif ?>
</head>
~~~```

Note that in the above, we assume the CSS files are listed in the `css.files` application parameter. And if the files are combined and compressed, the resulting file name should be put in the `css.files.compressed` application parameter. The console command should modify the application configuration file to update the `css.files.compressed` parameter after it generates the combined and compressed CSS file.
[...]
We can use the above CSS naming conventions in jQuery selectors in the application's javascript code. In particular, when selecting one or several elements using jQuery selectors, we should follow the similar rule for declaring CSS styles. For example, if we want to attach `click` handlers to all hyperlinks within news item blocks, we should use the following jQuery selectors:

~~~
 
[```javascript] $('.news-index .item a').click(function(){ ... }); ~~~``` That is, a selector should be prefixed with the root container CSS class name (`news-index` in the above). - Russian version: [Инструкции по созданию имен для CSS](http://phptime.ru/blog/30.html)
35 0
24 followers
Viewed: 50 350 times
Version: 1.1
Category: Tutorials
Tags: CSS, naming conventions
Written by: qiang
Last updated by: samdark
Created on: Oct 22, 2010
Last updated: 5 years ago
Update Article
Revert to #7 | Revert to #8

Revisions

View all history