How, when typesetting in a text editor, to quickly search for the desired block/element?

Question

HTML

Всю жизнь верстал в Adobe Dreamweaver. По той причине, что нравилась комбинация работы одновременно с "кодовой" частью (раздел кода) и экраном визуального отображения (раздел дизайна). Ну т.е. верстаю я только в кодовой части, а окно дизайна использую исключительно для быстрого поиска нужных мне элементов. Скажем, есть какой-то большой макет, с которым я работаю в текущий момент, либо же я вношу правки в какую-то из ранее созданных версток. Нужно мне поменять телефон в шапке - я в окне дизайна, где (пусть не всегда корректно) отображается созданный сайт, мышкой кликаю по нужному тексту, соответственно курсор и в кодовой части встает в нужное место и я правлю текст. Т.е., грубо говоря, кликая мышкой в окне дизайна по нужным мне блокам или элементам я быстро устанавливаю курсор в нужное мне место.
Now among layout designers and developers, as I understand it, it is fashionable to work in various advanced text editors, such as sublime, or even in an IDE. I also want to switch to the editor (look towards sublime). I know that it has huge possibilities (expanding due to plugins), but one question haunts me: how to quickly search for the blocks I need in the code? Search by class name via search function? Search simply in the code from memory? Search with browser's css inspector? But all this is still much longer, no matter how beautiful the code is, than just pointing the mouse at the desired element, seeing the entire page in front of you.
Actually, the question is: who and how carries out work with various layout elements, moving from one to another and quickly finding the right one?
PS at work, they even conducted an experiment. Me working in DW and a colleague working in sublime had to code the same code. This was the first part of the assignment. He got over it faster. Mostly because it uses the Emmet plugin. And the second part of the task was to make various changes to the existing layout (correct the text in such and such a block, swap the other two blocks, add one more item to the menu, etc.). And this part I have already dealt with faster. And much faster. He was looking for the right places for edits for a very long time.

Answer 1

Fuck what a bunch of letters.
I will answer the question in the title - to search for the desired line in css, firebug helps me (well, or if you wish, you can also use the console).
In the editor itself, to search for what I need, two keyboard shortcuts help me - Ctrl + G - to go to the desired line, Ctrl + F - to search for data in the document.
Search for files with some text - totalCommander + its convenient search.
And if a large project, then PHPStorm and its amenities help

Answer 2

I read a little. And I think you're doing it wrong. It is necessary to typeset in such a way that it would be, at best, intuitively clear what kind of block it is.
When you look at the logo, you immediately understand what it is, for sure .logo.
With the right approach to the layout of any project, whether it be large or super giant like Google, the search will take absolutely nothing. All that will take your time is ctrl+shift+c left click on the block to find out the name of the block.
Further only in the editor - ctrl+shift+n(go to file)-> css module name. And that's it.
Make it modular!

Answer 3

https://css-tricks.com/examples/ShapesOfCSS/