ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [CSS] Best practices
15 сообщений из 15, страница 1 из 1
[CSS] Best practices
    #38017979
scymaks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
scymaks
Участник
Добрый день.

Начал получать более крупные задачи чем изменить ширину там-то, добавить что-нибудь туда-то (в целом, работа заключалась в правке существующих стилей).

И вот начал верстать и пошел по такому пути:

Код: sql
1.
style.css



Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
div.page { /* */ }

/* Page header :: Begin */

div.page .header { /* */ }
div.page .header .top { /* */ }
div.page .header .middle { /* */ }
div.page .header .bottom { /* */ }

/* Page header :: End */

/* Page content :: Begin */

div.page .content { /* */ }
div.page .content .left-side-content { /* */ }
div.page .content .right-side-content { /* */ }

/* Page content :: End */

/* Page footer :: Begin */

div.page .footer { /* */ }
div.page .footer .top { /* */ }
div.page .footer .middle { /* */ }
div.page .footer .bottom { /* */ }

/* Page footer :: End */




Код: sql
1.
index.html



Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
...
<body>
    <div class="page">
        <!-- Page header -->
        <div class="header">
            <div class="top"> ... </div>
            <div class="middle"> ... </div>
            <div class="bottom"> ... </div>
        </div>

        <!-- Page content -->
        <div class="content"> 
            <div class="left-side-content"> ... </div>
            <div class="right-side-content"> ... </div>
        </div>
        
        <!-- Page footer -->
        <div class="footer">
            <div class="top"> ... </div>
            <div class="middle"> ... </div>
            <div class="bottom"> ... </div>
        </div>        
    </div>
</body>
...



Но выглядит это мягко говоря говнокодисто... Как в мире CSS делают подобные задачи?
...
Рейтинг: 0 / 0
30.10.2012, 08:07:01
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38017984
scymaks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
scymaks
Участник
Я читал статьи разные, и подозреваю что внутри index.html это должно выглядеть примерно вот так:

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
...
<body>
    <div id="page">
        <!-- Page header -->
        <div id="header">
            <div class="top"> ... </div>
            <div class="middle"> ... </div>
            <div class="bottom"> ... </div>
        </div>

        <!-- Page content -->
        <div id="content"> 
            <div class="left-side-content"> ... </div>
            <div class="right-side-content"> ... </div>
        </div>
        
        <!-- Page footer -->
        <div id="footer">
            <div class="top"> ... </div>
            <div class="middle"> ... </div>
            <div class="bottom"> ... </div>
        </div>        
    </div>
</body>
...



или что-то даже типа того:

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
...
<body>
    <div id="page">
        <!-- Page header -->
        <div id="header">
            <div id="header-top"> ... </div>
            <div id="header-middle"> ... </div>
            <div id="header-bottom"> ... </div>
        </div>

        <!-- Page content -->
        <div id="content"> 
            <div id="content-left-side"> ... </div>
            <div id="content-right-side"> ... </div>
        </div>
        
        <!-- Page footer -->
        <div id="footer">
            <div id="footer-top"> ... </div>
            <div id="footer-middle"> ... </div>
            <div id="footer-bottom"> ... </div>
        </div>        
    </div>
</body>
...



А там, где, например, меню, то делаем вот так:

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
...
<body>
    <div id="page">
        <!-- Page header -->
        <div id="header">
            <div id="header-top"> ... </div>
            <div id="header-middle"> ... </div>
            <div id="header-bottom"> ... </div>
        </div>

        <!-- Page content -->
        <div id="content"> 
            <div id="content-left-side">
                <div class="menu">
                    <div class="title"> Menu title </div>
                    <div class="items">
                       <div class="item"> Первый пункт меню </div>
                       <div class="item"> Второй пункт меню </div>
                       <div class="item"> Третий пункт меню </div>
                    </div>
                </div>
            </div>
            <div id="content-right-side"> ... </div>
        </div>
        
        <!-- Page footer -->
        <div id="footer">
            <div id="footer-top"> ... </div>
            <div id="footer-middle"> ... </div>
            <div id="footer-bottom"> ... </div>
        </div>        
    </div>
</body>
...
...
Рейтинг: 0 / 0
30.10.2012, 08:14:58
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38017994
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Не совсем понятна твоя проблема... Что именно хочешь?
...
Рейтинг: 0 / 0
30.10.2012, 08:23:23
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38018002
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
scymaksА там, где, например, меню, то делаем вот так:

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
                <div class="menu">
                    <div class="title"> Menu title </div>
                    <div class="items">
                       <div class="item"> Первый пункт меню </div>
                       <div class="item"> Второй пункт меню </div>
                       <div class="item"> Третий пункт меню </div>
                    </div>
                </div>


Я бы сделал так...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
                <div class="menu">
                    <hN> Menu title </hN>
                    <ul>
                       <li> Первый пункт меню </li>
                       <li> Второй пункт меню </li>
                       <li> Третий пункт меню </li>
                    </ul>
                </div>


Где hN какой-то уровень заголовка...
...
Рейтинг: 0 / 0
30.10.2012, 08:30:31
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38018004
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
scymaksпошел по такому пути:

Код: sql
1.
style.css



Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
div.page { /* */ }

/* Page header :: Begin */

div.page .header { /* */ }
div.page .header .top { /* */ }
div.page .header .middle { /* */ }
div.page .header .bottom { /* */ }

/* Page header :: End */

/* Page content :: Begin */

div.page .content { /* */ }
div.page .content .left-side-content { /* */ }
div.page .content .right-side-content { /* */ }

/* Page content :: End */

/* Page footer :: Begin */

div.page .footer { /* */ }
div.page .footer .top { /* */ }
div.page .footer .middle { /* */ }
div.page .footer .bottom { /* */ }

/* Page footer :: End */


Никогда не понимал, зачем эти повторения? Я про div.page и же с ними...
...
Рейтинг: 0 / 0
30.10.2012, 08:34:35
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38018011
scymaks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
scymaks
Участник
krvsa,

Ну хочу чтобы стили были распространены в своей области видимости и не более...
...
Рейтинг: 0 / 0
30.10.2012, 08:46:57
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38018012
scymaks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
scymaks
Участник
krvsa,

насчет ul списка... Не знаю... Читал, что есть какие-то минусы такого подхода
...
Рейтинг: 0 / 0
30.10.2012, 08:47:34
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38018265
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
Автор, Вы ищете это:
http://ru.bem.info/
?
...
Рейтинг: 0 / 0
30.10.2012, 11:10:18
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38018338
bazile
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bazile
Участник
scymaksНу хочу чтобы стили были распространены в своей области видимости и не более...
Желание понятное, но неправильное с точки зрения производительности CSS. Почитай для затравки пару статей - Optimize browser rendering , Writing efficient CSS .

scymaksнасчет ul списка... Не знаю... Читал, что есть какие-то минусы такого подхода
krvsa прав. UL здесь лучше подходит т.к. меню является списком.
...
Рейтинг: 0 / 0
30.10.2012, 11:49:21
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38018503
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
bazileПочитай для затравки пару статей - Optimize browser rendering , Writing efficient CSS .Первую можно не читать, во второй все то же и подробнее.
...
Рейтинг: 0 / 0
30.10.2012, 13:08:30
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38019338
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
scymaksЧитал, что есть какие-то минусы такого подхода
А я читал про семантическую верстку... И минусов у списков при применении к меню пока не встречал.
...
Рейтинг: 0 / 0
30.10.2012, 20:31:43
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38020572
scymaks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
scymaks
Участник
krvsa,

ну я же начинающий еще. Я делаю пока что так, как умею. Вот наберусь опыта, и буду делать лучше.
...
Рейтинг: 0 / 0
31.10.2012, 17:40:50
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38020573
scymaks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
scymaks
Участник
Паганель,

да, спасибо , почитаю )
...
Рейтинг: 0 / 0
31.10.2012, 17:41:07
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38020575
scymaks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
scymaks
Участник
bazile,

Спасибо за ссылки, прочту обязательно!
...
Рейтинг: 0 / 0
31.10.2012, 17:41:33
| Ответить | Цитировать | Написать  
[CSS] Best practices
    #38021060
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
scymaksну я же начинающий еще. Я делаю пока что так, как умею. Вот наберусь опыта, и буду делать лучше.
Главное что уже примеры тестовые делаешь. А то многие даже на это сподобиться не в состоянии...
...
Рейтинг: 0 / 0
01.11.2012, 08:55:24
| Ответить | Цитировать | Написать  
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [CSS] Best practices
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=152&tid=1449171]:
 0ms
get settings:
 5ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 23ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 41ms
get tp. blocked users:
 1ms
others: 210ms
total:  305ms
созд. / загр.: 305ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]