Home Web Front-end HTML Tutorial What level of CSS developer are you? _html/css_WEB-ITnose

What level of CSS developer are you? _html/css_WEB-ITnose

Jun 24, 2016 am 11:59 AM
css Developer grade

We are constantly learning and pursuing progress and improvement. To what extent have we learned? Do we really understand CSS? What level are we at? Let's compare.

 Level 0: CSS? Isn't that a multiplayer shooter?
 CSS? Isn't that a multiplayer game?
 Some people came to the #CSS website because they were looking for information about the game CS:S (Counter Strike: Source). Don't worry about these people, they can't create too many web pages, so they won't cause much harm to the network.

 Level 1: Yeah, I use it to remove underlines on links sometimes And Level 0 People are different. These people have learned HTML and have made several simple websites. They only use CSS when they can't create certain effects using HTML, such as removing the bottom line of a link or setting a line height. These people's websites are usually small and don't have many visitors, so they don't do much harm to the network.


Level 2: No, I don’t like div elements; tables are much easier to use!
No, I don't like divs; tables are much easier to work with They have heard about using div elements to design web pages and have spent some time learning CSS. However, they quickly gave up, feeling that CSS was too difficult and poorly supported, and would rather use tables for layout.
Attention! They are dangerous people! They have been in this field for a while and many are heads of website departments. It is very important to get in touch with them. People who advocate network standards should educate them. This is of great significance to the network.

 
Level 3: Yes, I heard it's good, but I didn't use it because...
  Yes I've heard it's good, but I can't use it because of… Although these people know the advantages of CSS, they are always unable to use it for some reason. For example, they may have a 2nd level boss, or they must consider Netscape 4 users.
Although older browsers do not support CSS, users can still see the complete content. Based on the benefits of accessibility and usability, CSS can bring more visitors to the website. Telling these advantages to Level 3 developers, even if they are not the decision-makers, may be able to exert some influence on Level 2 bosses.

 
Level 4: CSS? oh! Yes, I use div elements for layout
CSS? Oh! Yes, I use divs for all my layouts Using too many div elements in the page is a problem for this group of people, they will Use #toprightredline or #r5_c7 (meaning column 5, column 7) to set the id of the div element. Even if it can pass XHTML 1.1 verification, this typesetting method cannot take advantage of CSS. Screen readers (browsers used by the visually impaired) have difficulty interpreting these web pages, and older browsers also have the same problem, preventing the entire content of the web page from being displayed. The bad naming methods of class and id also cause great inconvenience to the modification of the layout.
Although Level 4 people still produce terrible websites, they do less damage to the network because they are more receptive to new ideas. Many WYSIWYG editors produce source code full of div elements, which may be the reason why this group of people is misled. Fortunately, these editors are gradually improving, and hopefully this will help those at level 4 continue to move up.

 
Level 5: I use CSS for design, it's better than tables because of…
People at Level 5 know the advantages of CSS and are happy to use it. Although they sometimes encounter some problems, they are not serious. They can also use their long experience working with CSS to argue why the structure and design of a web page should be separated. I'm guessing that most of the readers of this article are CSS developers at this level, and I think I am one too. But this is not the best...  
Level 6: Which version of CSS? Yes, I know. Did you read my book about…

What version of CSS? Yes, I do. Did you read my book about…
Level 6 people work on improving CSS and write many great articles introducing new uses for it. Some of them have read all the W3C documentation on CSS and know which features are supported by which browser version. They are role models for CSS beginners and use their influence to make the web more progressive. Many of them have formed the Web Standards Project, and if you find any errors on their sites, there must be a reason, and you will be able to get a satisfactory answer after asking them for help.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to remove the default style in Bootstrap list? How to remove the default style in Bootstrap list? Apr 07, 2025 am 10:18 AM

The default style of the Bootstrap list can be removed with CSS override. Use more specific CSS rules and selectors, follow the "proximity principle" and "weight principle", overriding the Bootstrap default style. To avoid style conflicts, more targeted selectors can be used. If the override is unsuccessful, adjust the weight of the custom CSS. At the same time, pay attention to performance optimization, avoid overuse of !important, and write concise and efficient CSS code.

How to layout bootstrap How to layout bootstrap Apr 07, 2025 pm 02:24 PM

To use Bootstrap to layout a website, you need to use a grid system to divide the page into containers, rows, and columns. First add the container, then add the rows in it, add the columns within the row, and finally add the content in the column. Bootstrap's responsive layout function automatically adjusts the layout according to breakpoints (xs, sm, md, lg, xl). Different layouts under different screen sizes can be achieved by using responsive classes.

How to build a bootstrap framework How to build a bootstrap framework Apr 07, 2025 pm 12:57 PM

To create a Bootstrap framework, follow these steps: Install Bootstrap via CDN or install a local copy. Create an HTML document and link Bootstrap CSS to the <head> section. Add Bootstrap JavaScript file to the <body> section. Use the Bootstrap component and customize the stylesheet to suit your needs.

How to set the bootstrap navigation bar How to set the bootstrap navigation bar Apr 07, 2025 pm 01:51 PM

Bootstrap provides a simple guide to setting up navigation bars: Introducing the Bootstrap library to create navigation bar containers Add brand identity Create navigation links Add other elements (optional) Adjust styles (optional)

How to insert pictures on bootstrap How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to upload files on bootstrap How to upload files on bootstrap Apr 07, 2025 pm 01:09 PM

The file upload function can be implemented through Bootstrap. The steps are as follows: introduce Bootstrap CSS and JavaScript files; create file input fields; create file upload buttons; handle file uploads (using FormData to collect data and then send to the server); custom style (optional).

How is the compatibility of Bootstrap image centering How is the compatibility of Bootstrap image centering Apr 07, 2025 am 07:51 AM

Bootstrap image centering faces compatibility issues. The solution is as follows: Use mx-auto to center the image horizontally for display: block. Vertical centering Use Flexbox or Grid layouts to ensure that the parent element is vertically centered to align the child elements. For IE browser compatibility, use tools such as Autoprefixer to automatically add browser prefixes. Optimize image size, format and loading order to improve page performance.

How to view Bootstrap's grid system How to view Bootstrap's grid system Apr 07, 2025 am 09:48 AM

Bootstrap's mesh system is a rule for quickly building responsive layouts, consisting of three main classes: container (container), row (row), and col (column). By default, 12-column grids are provided, and the width of each column can be adjusted through auxiliary classes such as col-md-, thereby achieving layout optimization for different screen sizes. By using offset classes and nested meshes, layout flexibility can be extended. When using a grid system, make sure that each element has the correct nesting structure and consider performance optimization to improve page loading speed. Only by in-depth understanding and practice can we master the Bootstrap grid system proficiently.

See all articles