Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
McKenzie Klasing
5,327 PointsMassive amounts of internal CSS being used in a webpage I am trying to duplicate. Is this normal?
Aside from 20-30 hours study over the last week, I am new to software.
I am working on duplicating a webpage (landing page) (link here: http://goinswriter.com/welcome?es=cozpwow7c02dm756lm48zb9hvtqbvzhk)
With the devtool I can see that in the <head> there are two 200-300 line bricks of CSS (SEE EXAMPLE 1 AT THE BOTTOM). Is this a normal practice? And if so, is there anyway to paste this into a text editor and have it be rearranged?
Later in the <body> there are many more instances of a ton of CSS being used for each paragraph. Again, is this normal/smart? Is there a better way to do it?
Is there a text editor that will automatically structure this code so it isn't a big dumb brick?
Example 1: <style type="text/css">html,body{margin:0px;font-size:16px;font-family:'Lora',serif;color:#363636}a{text-decoration:none}p{margin:0px 0px 1em 0px}.container{max-width:1160px;padding:0px 20px;margin:0px auto}nav{height:8px;backg........................................ and so on for a few thousand more characters.
Example 2: <p id="s03-text-p-block2-text-02" class="role-element leadstyle-text"><span style="font-family: Lora, serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(54, 54, 55); font-size: 28px; font-weight: bold; line-height: normal; background-color: rgb(255, 255, 254);">Proven Path to Discovering What You Were Meant to Do</span><br style.................................................................................... and so on.
2 Answers
Nattapol Kamolbal
15,528 PointsIt's normal for CSS file to be very long. The style.css in your webpage is minified version which mean that the developer striped out all the white space and comment to reduce the file size. This is the best practice. You can use the tool like unminify.com to arrange the css file back to normal version.
However, I saw that there're a lot of inline css in the source code and many of them duplicated. This isn't the best practice since you can set your style in css file once and be done. Inline css also make the future development harder because you have to search and replace all of your page when you want to change some styling of the element. (The task that you easily done on css file.)
If you want to have more organized css files, I recommend you to take a look at SASS. It's an improved version of CSS which will make your life easier. There're courses about it on Treehouse. Take a look.
I also recommend the framework like Foundation or Bootstrap. This will help you to start your project faster.
Konrad Pilch
2,435 PointsI make fairly small sites, and my CSS line range from 700-1600.
Look at this site and go on my portfolio. There are quite a lot of CSS. Now im doing a site on restaurant, and im arond 700 lines of code.
Im not an expert so i mgiht repeat my self sometimes, but thats how my sites are.
Unless your doing a failry simple parallax site, then i think it can be on the lower end of the CSS lines.